Jump to content

QuickTip: yoyoEase

| GreenSock

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!



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


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

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock

User Feedback

Recommended Comments

There are no comments to display.

This is now closed for further comments