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.
One thing about working with responsive SVG animation…is that people expect mobile to be faster than the web;…I know that for us web developers like,…that doesn't make any sense,…because, you know, everything's kinda throttled on mobile…and you're trying to like, give more information…on a smaller screen with less connection,…but for other people, they kind of like,…consider that it's a smaller version of the thing,…so why doesn't it load quicker?…So, the performance for SVG animations is really important,…because you're kind of considering that for mobile.…
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