While this isn’t specific to SVG, performance can be heavily impacted by unoptimized SVG graphics. Sarah stresses the importance in testing the performance of web animations. She also shares a few of her own benchmarks as they related to different animation styles.
(oriental introduction music)…- CSS Property Animation on the web.…This isn't just for SVG,…but this is just like an FYI,…and why I talk about these things in that way.…This is taken directly from, I like restyled it,…but it was taken directly from Paul Lewis, Aerotwist,…and Paul Irish at Google and some of the like…recordings that they found.…So opacity and transforms are really really awesome,…they're really really awesome ways of moving things,…because as you can see, they don't change things…based on the layout or the paint.…
And the paint, of course, is being like the…heaviest taxing for the DOM.…And then everything else you can see how much,…like just paint all the way down,…and that's true of pretty much every other element.…Now before you get kind of, or property sorry.…Before you get sad that you can only use…opacity and transforms, most of the really…complicated pens I'm gonna show you…pretty much just use opacity and transforms.…There's a ton you can do because transforms have scale,…they have translates, they have all sorts of skew,…
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