Jump to content
GreenSock

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

QuickTip: yoyoEase


| GreenSock
15004

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

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.



Guest
This is now closed for further comments

×