SVG Essentials & Animation, v2 SVG Essentials & Animation, v2

Interaction & GSAP Timeline Functions

Check out a free preview of the full SVG Essentials & Animation, v2 course:
The "Interaction & GSAP Timeline Functions" Lesson is part of the full, SVG Essentials & Animation, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah gives an overview of commonly used useful functions.

Get Unlimited Access Now

Transcript from the "Interaction & GSAP Timeline Functions" Lesson

[00:00:00]
>> Sarah Drasner: Okay, so useful functions for interaction with the GSAP timeline. We can pause a timeline. We can restart a timeline. We can resume a timeline. So if I used pause, I'd use resume. So it would pause, and then it would start again from that point in time, right?

[00:00:17] We can say tl.restart, that says start it back from the beginning of the timeline. We can play from x number of seconds. We can play from x number of seconds from the end. We saw seek earlier, that was when we found that one part of the timeline to start from, so we could keep working on that longer timeline.

[00:00:37] tl.reverse, that one's really cool. We saw that before. So what we could do is have click, the whole thing goes through, and then say, restart, reverse. And use those two methods together, and it would play from the end to the beginning. time scale, we also saw, when we sped the entire animation up.

[00:00:59] The other cool thing about putting those things into sections, that you add to master, is you could just speed up one section. So you could just speed up one, like scene one, or you could speed up the whole timeline. There have been times where I put things into one function together, just so I could adjust the timing of that little unit.

[00:01:20] Progress, skip to halfway, you might think, like, what's that good for, or that seems not that useful. We're gonna do some weird stuff with this later. It's gonna get crazy.