Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
engineersatendra

How to implement CSS3 @keyframes in tweenMax

Recommended Posts

Hello friends !!! I'm a newbie on GSAP tweenMax and don't know how to make tweenMax object for animation like this CSS3 keyframes.

@keyframes rubberBand {

 from {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
 30% {
 -webkit-transform: scale3d(1.25, 0.75, 1);
 transform: scale3d(1.25, 0.75, 1);
}
 40% {
 -webkit-transform: scale3d(0.75, 1.25, 1);
 transform: scale3d(0.75, 1.25, 1);
}
 50% {
 -webkit-transform: scale3d(1.15, 0.85, 1);
 transform: scale3d(1.15, 0.85, 1);
}
 65% {
 -webkit-transform: scale3d(.95, 1.05, 1);
 transform: scale3d(.95, 1.05, 1);
}
 75% {
 -webkit-transform: scale3d(1.05, .95, 1);
 transform: scale3d(1.05, .95, 1);
}
 to {
 -webkit-transform: scale3d(1, 1, 1);
 transform: scale3d(1, 1, 1);
}
}


please help me about this !!!

Link to post
Share on other sites

This is pretty close: 

http://codepen.io/anon/pen/ORRyPP

 

You can easily tweak the strength of the effect, how many times it wobbles, etc. by changing the numbers in the Elastic.easeOut.config() method. See http://greensock.com/ease-visualizer for more details and to play around with eases. 

 

I'd argue that the GSAP one looks more realistic. 

var tl = new TimelineLite();
tl.to("#gsap", 1.2, {scaleX:1.25, scaleY:0.75});
tl.to("#gsap", 2.8, {scaleX:1, scaleY:1, ease:Elastic.easeOut.config(3, 0.3)});

That assumes a total duration of 4 seconds, but you can very easily tweak that. Or just set tl.timeScale() to whatever you want to control the whole thing. Lots of flexibility. :)

 

Is that what you were looking for? 

Link to post
Share on other sites

Just wanted to note for future readers: GSAP has its own keyframes now! For more information, see the GSAP 3 release notes:

 

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×