Greensock has the ability to stagger animations. This code is much simpler and more customizable than the CSS equivalent. Greenback can also set and animate CSS properties. After a quick demonstration, Sarah discusses why controlling CSS properties from Greensock can be useful.
(oriental music)…- One thing I'll say about Stagger,…I wrote a Stagger in CSS, SASS and GSAP…so that you can see the difference between all of this.…Stagger is something that we use in animation a lot.…It's something that actually can make UIs look much better,…it's something that people,…a lot of the Pens you'll see coming up…have a lot of small staggers inside of them.…I just wrote, each one of them in HAML,…I'm just showing you each piece of the code…I just wrote this really quick in HAML…and then for the CSS I'm having to go through…and write for every nth-child…make it have a delay of .1 seconds more than the last one.…
Now, I could dry that out in SASS, right?…and write it the same way basically,…but it's still gonna compile down to all the other code.…So you're still using all of that other code,…but in GSAP it's really just one line…and it's really, really, concise.…It's just one staggerTo, staggerFrom or staggerFromTo…is a very easy thing.…- [Female Student] What is stagger? Is it just animation?…- Yeah, it's when they come in like,…
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