Jump to content
GreenSock

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

QuickTip: yoyoEase
Sign in to follow this  


| GreenSock
6383

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.

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

Join the Club

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Guest
This is now closed for further comments

×