Loop a Tween Forever Using Yoyo and Repeat with GreenSock
Sometimes you want to leave an animation looping without any user interaction. This is done using the "repeat" and "yoyo" properties combined to keep the tween moving back and forth from the start properties to the end properties.
Instructor: [00:00] Sometimes, you just want an animation to continuous loop. If I go tweenMax to grab the Eggo, set the duration to one second, then say the scale should be 1.25, hit save, you'll see it scale up. Then it's done.
[00:16] If I then add a repeat of -1, then it'll infinitely repeat, but it'll start from 0or start from 1, and go up to 1.25. Any positive number, if I just put 2 there, you'd see it would do this twice, then stop and not repeat.
[00:34] We'll leave that at -1. Then to make it go back and forth, I'm going to add in a yoyo true. If I hit save there, you'll see it go in and out, in and out, nice and smoothly. Now, to make this more emphasized, I'm going to bring in a different type of tween.
[00:51] We're going to call this elastic, and I'll set the ease of our tween now to elastic, and just do elastic ease in out. Hit save there, and now it'll sproing in and sproing out. If we make this a little bit faster, this will definitely draw someone's attention to that part of the page.