Create Animation Steps with GreenSock's Timeline
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.
Instructor: [00:00] 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.
[00:14] 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.
[00:27] 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.
[00:55] 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.
[01:11] 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.