Create Animation Steps with GreenSock's Timeline

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

egghead
egghead
~ 19 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today