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

[jstafford 23 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

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) });

[jstafford 23 Likes (Newbie)]

Wow, that sure is simple with GSAP. By the way, I am a fan of your codepen work Diaco. Cool stuff. Thanks. John

[jstafford 23 Likes (Newbie)]

Also, thank you for clarifying what the TweenMax includes.

[Diaco 1,948 Likes (Superhero)]

Yep , with GSAP our web life/works is really easier , sweeter  ... btw , really Glad to hear you like my Codepen stuff 

[jstafford 23 Likes (Newbie)]

Diaco, what am I missing with this TweenMax.to that we went over earlier. I re-worked the css to the way it is in my actual application, and there is no animation. What am I missing?

 

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

[Diaco 1,948 Likes (Superhero)]

you've changed your text container id , pls fix your js selector

 

pls check this out : 

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

[jstafford 23 Likes (Newbie)]

Uggggggh. Thanks Diaco!