Jump to content
Search Community

How to implement CSS3 @keyframes in tweenMax

engineersatendra test
Moderator Tag

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: 

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

  • 3 years later...

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.
×
×
  • Create New...