One of Sarah’s favorite features of Greensock is the MorphSVG plugin. This plugin can animate points from one shape to the points of another. Sarah shares a few examples of morphing shapes and gives a few tips for animating complex shapes.
(oriental music)…- This is one of my favorites and this is, again,…like what I was saying before, I think GreenSock really…knocked it out of the park with this one;…MorphSVG is probably one of my favorite things of all time.…So I, I made some like silly little demos…for you with like, interchangeable hipsters…with their interchangeable glasses…and interchangeable facial hair to just see like…how easy it is to tween through all of these shapes.…
So this is like, something that I do a lot in…MorphSVG that is just like a basic principle…for all of like, planning how to work with your designs…and animations, is to design all of the things first…and then slowly unveil things, so that you're not…going inbetween and back and forth and back and forth,…and what I mean by that is, I mentioned before…I work for CSS-Tricks, I recently did this kind of like…Easter egg on the site, so when you go to their site…and you play with the logo, some things happen,…so if you're on the site and you click on,…if you like hover on this, there's a little toggle here…
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