Jump to content
GreenSock

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

QuickTip: yoyoEase


| GreenSock
12664

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.

  • 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

×