Advanced SVG Animation
A peek to Sarah Drasner's workshop @sdras : codepen
The SVG
- Crisp on any display
- Easily Scalable for responsive
- Small file size for performance
- Easy to animate
- Easy to make accessible
- CSS properties
The SVG
The SVG DOM
Platonic shapes
The SVG DOM
Viewbox and responsive
The SVG DOM
Viewbox and clipping
The SVG DOM
Viewbox and clipping
The SVG DOM
Preserve Aspect Ratio
Default attribute: preserveAspectRatio ="xMidYMid meet"
xMidYMid meet
xMinYMin meet
xMaxYMax meet
xMinYMin slice
xMidYMid slice
xMaxYMax slice
none
Paths
Paths and Groups
Paths
Paths and Groups
Polyline
Paths and Groups
Group
Paths and Groups
Accessibility
Using ARIA
Aria support charts and this article by Heather Migliorisi
Preparing SVG
for animation
1. Illustrator
2. Delete unnecessary shapes
3. Divide objects
4. Name layers
5. Export to SVG
Preparing SVG
for animation
1. Inline style
2. SVG
3. Layer Names
4. No minify (for now)
5. Responsive (optional)
6. Show code
Optimization
for SVG
Optimization
for SVG
1. SVGO
2. SVGOMG
CSS animation
support for SVG
Animation inside the SVG:
- img src
- object / iframe / embeded
- background url
- xlink
Animation and interaction:
- inline
CSS animation
Special properties & removing markups
CSS animation
Responsive images
SVG
PROS
- Great for UI/UX animation
- Resolution and PPI independent
- Easier to debug
- Pixels dance!
- Great for really impressive 3d or immersive stuff
- Movement of a tons of objects
Canvas
CONS
- Slow with a lot of objects
- Care about the way to animate
- Not accessible
- Not resolution PPI independent
- Easy to break
Tools
CSS
- Small sequences and simple interactions
- Once you get more than 3, switch to something else...
- Great for sequencing and complex movement
- Cross-browser consistency
GreenSock (GSAP)
- Snap.svg is more like jQuery for SVG
- Web Animations API looks great, still waiting on support
- Velocity is similar to GSAP with less bells and whistles
- Mo.js looks great and is still in beta
- D3.js was built for data vis but you can do a lot more with it
- Spirit app js animation saved in JSON
- Popmotion javascript library to animate
Other
Performance
for CSS animations
CSS Layout Painting and Composite tables
Source: Sarah Drasner
Performance
for CSS animations
Performance
for CSS animations
Performance
compared
Source: Sarah Drasner
GreenSock
GSAP
GreenSock
GSAP
GreenSock
CSS
GreenSock
SCSS
GreenSock
GSAP
GreenSock
GSAP
Timeline
GSAP
NestingTimeline
GSAP
NestingTimeline
GSAP
Advanced SVG Animation
A peek to Sarah Drasner's workshop @sdras : codepen