Name: Create Animation Steps with GreenSock's Timeline
Uploaded: 2018-10-23T13:00:20-05:00
Description: 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.

Setup GreenSock as a Module with Parcel

Animate and Center an Element to a Click Event with GreenSock

Rotate an Element Based on Previous Values with GreenSock

Create Animation Steps with GreenSock's Timeline

Pause or Resume an Animation by Checking isActive with GreenSock

Manually Control the Animation with progress in GreenSock

Animate From a Variable Point with from and fromTo in GreenSock

Control an Array of Elements with the Same Animation in GreenSock

Stop Animations with killTweensOf and killAll in GreenSock

Animate Between CSS Classes with GreenSock

Spin Elements in 3d with GreenSock

Control the Shared 3d Perspective of Multiple Elements with GreenSock

Loop a Tween Forever Using Yoyo and Repeat with GreenSock

Create Amazing Animations with GreenSock

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.

https://app.egghead.io/api/v1/lessons/greensock-create-animation-steps-with-greensock-s-timeline/subtitles

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.

Create Animation Steps with GreenSock's Timeline

Share this video with your friends

Course

Create Amazing Animations with GreenSock