Search the Community
Showing results for tags 'yoyoease'.
-
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.
-
- 1
-
-
- reverse ease
- yoyoease
- (and 4 more)
-
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. Here are some of the highlights of the GSAP 1.20.0 release... yoyoEase Now 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! Animate CSS Variables (custom properties) See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen. Emoji support in TextPlugin 'Nuf said. ...and more There are quite a few little improvements and bug fixes as well, which are listed in the changelog at the github repository. Download GSAP today. Happy tweening!
-
- yoyoease
- css variables
-
(and 6 more)
Tagged with: