Skip to the content
- Common methods for animating on the Web
- CSS Transitions and animations
- Canvas
- SVG
- WebGL
- Animating with CSS
- Pros
- Performance
- No need for JS
- Cons
- Excellent for
- loaders
- UI
- Image manipulation
- Canvas
- Pros
- “painting” to single element
- bitmap manipulation
- Cons
- Not crawlable
- stateless, need JS to control/track movement, hit areas etc
- Excellent for
- Games
- Particle effects
- emulating physics
- image manipulation
- drawling/painting applications
- SVG
- Pros
- vector
- real text – crawl able content
- Animate defined paths
- Cons
- High complexity
- compromised performance
- Excellent for
- icons / UI elements that need to scale
- animating along defined paths
- No strict rules – just gotta experiment
- Two important goals
- Performance (60 fps)
- Purpose
- How to level up
- Know your browser
- Write efficient JavaScript
- Watch a lot of motion graphics
- Experiment
- Devtools are your friend
- Good JavaScript is key
- Watch your memory and garbage collection
- Minimize processing/memory intensive activity in an animation loop
- Chose event listening/handling wisely
- “Libraries are a tool to get you there but they are not the answer.”
- Take inspiration from motion graphics
- http://activetheory.net
One Comment