Jump to content
GreenSock

QuickTip: yoyoEase


| GreenSock
15639

You can specify an ease for the yoyo (backwards) portion of a repeating animation. Set it to a specific ease like yoyoEase: "power2" or to flip the existing ease, use the shortcut yoyoEase:true. GSAP 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
gsap.to(".green",  { duration: 2, x:700, ease: "bounce.out", yoyoEase: "power2.out",  repeat:10, repeatDelay:0.1});

//setting yoyoEase:true flips the bounce so that you have a "bounce.out" in both directions
gsap.to(".orange",  { duration: 2, x:700, ease: "bounce.out", 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.

  • Like 1

Get an all-access pass to premium plugins, offers, and more!

Join the Club

With great power comes great responsibility. Tween wisely.

- Team GreenSock



User Feedback

Recommended Comments

There are no comments to display.



Guest
This is now closed for further comments

×