Sarah introduces some of the features of the Greensock animation library. She then discusses how it can solve some of the issues that arise related to longer animations, browser inconsistencies, and performance.
(dynamic music)…- [Sarah] The issue with longer CSS animations,…I pretty much like personally recommend…and you can do whatever you think is best, of course,…that any time you get longer into an animation,…then like three things happening,…you know how you, if you're doing a CSS animation,…you have one movement…and then you do a negative delay for the next movement…and then you do a negative delay for the next movement…in order to kind of chain animations.…
Anytime you get passed two or three of those,…I would say you should probably be switching to Greensock.…First of all, it's a small file size,…like if you're really just looking to move one thing…and you don't need all of the timeline…and all of the repeat functions and things like that,…it's like four kilobytes or something like that,…all of TweenMax is something like 20 kilobytes,…I mean, it's really not that large…for such a powerful library.…It does make things more stable,…which I'll talk about again in a minute,…but the really big thing that I have to say…
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