One of the most powerful features of the Greensock animation library is the ability to create Timeline objects. Timelines are a sequence of animations that can be paused, reversed, sped up, slowed down, and synchronized with other timelines. Sarah walks through the syntax for creating timelines and shares a few examples.
(dramatic instrumental flute music)…- And the biggest one is the timeline.…We're going to spend a little bit of time…with the timeline…because this is probably the most fundamental thing…that you're going to learn today…because this is really going to help you…when you're working a lot.…The timeline is so amazing…because you can stack tweens.…We were just talking about how complex…it is to so in CSS.…You can set them a little bit before and after each other.…That's something you can't do in CSS very easily.…
So, if I have something that's like 40 seconds in,…let's say I have the most giant, like,…longest animation ever.…I can say just be like a little bit…into that last one that happened,…and like very simple code.…You can change their placement in time.…You can group them into scenes.…You could add relative labels.…So, let's say you need 17 things to happen at once.…You add a relative label of, like, now…and then you just set them all of the animations…at that time frame,…and it doesn't matter where it is in timeline,…
Note: This course was created by Frontend Masters. It was originally released on 2/19/2016. We're pleased to host this training in our library.
- Paths and groups
- Platonic shapes
- Optimization and CSS animations
- SVG sprites
- Atmospheric and elemental motion
- GreenSock workflow
- Staggering animations
- UI/UX animation vs. standalone
- DrawSVG and motion along a path
- Animating text and relative color values