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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!