Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Loop a Tween Forever Using Yoyo and Repeat with GreenSock

    John LindquistJohn Lindquist
    greensockGreenSock

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss