Jump to content
Search Community

CSS3 Keyframes with Cubic Bezier Transition Function (First GSAP Animation)

jstafford test
Moderator Tag

Go to solution Solved by Diaco,

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

Hi,

 

I have a working CSS3 Keyframe Animation with Cubic Bezier Transition Function (See codepen, ). I am using this piece of code to write my first Greensock animation, but I am a little unsure where to begin. Can anyone recommend needed plugins and or strategies for converting this into a GSAP animation? Specifically, do I need all three Tweenmax, Bezier, and CSSPlugin for this? I am watching as many demos as I can and reading up on the API but would appreciate some guidance here. This will be the beginning of multiple animations that will start and stop after another. Is Timelinemax going to be of value to me? Found this, but I have more than two points that I want to go FromTo. . http://greensock.com/forums/topic/9210-convert-css-keyframes-animation-to-gsap-js/

 

Thanks.

 

John

See the Pen gaMrVz by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

Hi jstafford  :)

 

All the necessary plugin included in TweenMax :

( TweenMax , TimelineMax , CSSPlugin , BezierPlugin , DirectionalRotationPlugin , AttrPlugin , RoundPropsPlugin , EasePack )

 

So you just need to load TweenMax :)

 

in your case you don't need to use BezierPlugin , and can have same effect by Elastic ease type .

pls check this out : 

See the Pen WQxxGB by MAW (@MAW) on CodePen

 

btw , you can config Elastic and some other ease type , pls check this out for Elastic : http://greensock.com/docs/#/HTML5/Easing/Elastic/

like this : 

TweenLite.from( myElem , 1.5 ,{ x:-500 , skewX:-50 , ease:Elastic.easeOut.config(1,0.1) });
  • Like 3
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.
×
×
  • Create New...