QuickTip: yoyoEase

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes f…


This content originally appeared on Blog and was authored by Blog

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details.

You can specify an ease for the yoyo (backwards) portion of a repeating TweenMax animation. Set it to a specific ease like yoyoEase:Power2.easeOut or to flip the existing ease, use the shortcut yoyoEase:true. TweenMax is smart enough to automatically set yoyo:true if you define a yoyoEase, so there's less code for you to write. Score!

Video

Code 

//this tween has a different ease in each direction
TweenMax.to(".green", 2, {x:700, ease:Bounce.easeOut, yoyoEase:Power2.easeOut,  repeat:10, repeatDelay:0.1});

//setting yoyoEase:true flips the bounce so that you have a Bounce.easeOut in both directions
TweenMax.to(".orange", 2, {x:700, ease:Bounce.easeOut, yoyoEase:true,  repeat:10, repeatDelay:0.1});

Demo

See the Pen yoyoEase demo by GreenSock (@GreenSock) on CodePen.

yoyoEase is available in version 1.20.0 and higher.


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2018-03-08T15:16:12+00:00) QuickTip: yoyoEase. Retrieved from https://www.scien.cx/2018/03/08/quicktip-yoyoease/

MLA
" » QuickTip: yoyoEase." Blog | Sciencx - Thursday March 8, 2018, https://www.scien.cx/2018/03/08/quicktip-yoyoease/
HARVARD
Blog | Sciencx Thursday March 8, 2018 » QuickTip: yoyoEase., viewed ,<https://www.scien.cx/2018/03/08/quicktip-yoyoease/>
VANCOUVER
Blog | Sciencx - » QuickTip: yoyoEase. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/03/08/quicktip-yoyoease/
CHICAGO
" » QuickTip: yoyoEase." Blog | Sciencx - Accessed . https://www.scien.cx/2018/03/08/quicktip-yoyoease/
IEEE
" » QuickTip: yoyoEase." Blog | Sciencx [Online]. Available: https://www.scien.cx/2018/03/08/quicktip-yoyoease/. [Accessed: ]
rf:citation
» QuickTip: yoyoEase | Blog | Sciencx | https://www.scien.cx/2018/03/08/quicktip-yoyoease/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts