Jump to content
GreenSock

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

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

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

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

  • Like 1
Link to comment
Share on other sites

Also, thank you for clarifying what the TweenMax includes.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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