Jump to content

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

How to implement CSS3 @keyframes in tweenMax

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
Share on other sites

  • Solution

This is pretty close: 



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 comment
Share on other sites

  • 3 years later...

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 comment
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.