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
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create Animation Steps with GreenSock's Timeline

    John LindquistJohn Lindquist

    Animations often have multiple steps. GreenSock makes this simple with the concept of a timeline where you code each point you want your element to move to. This lesson will show you how to set up a timeline as well as pause and resume the timeline animation.



    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




    Instructor: Import TimelineMax, then we can create a new TimelineMax. I'm going to call this simply Timeline. In my timeline, I can set up a sequence of things to do.

    I'm going to say Timeline2, select our box, say 05 seconds is the duration, and we want to move it to X100. I'll hit save, and you'll see this slide over to X100.

    I'm going to copy this down three times -- one, two, three -- change this to Y100, change this to X50, change this to Y50. Now hit save here, and you'll see it slides right, down, left, and up. Because this runs automatically -- if I refresh, you see it runs automatically -- I'm going to timeline.pause.

    When I hit save and refresh, nothing happens. To get it going, I'm going to do document query selector to select our box, select the box ID, and then add an event listener to this.

    We'll say on-click, and in the event listener, timeline.resume. We'll hit save, that'll reformat. When I click on the box, it goes right, down, left, and up.