Web animations are
- Angular Animations
- Animating with SVGs
- CSS Animations
- Animations on After Effects
Introducing animation into our angular animations using a 'CAL' stack which represents CSS animations, Angular animations and Lottie animations.
Anatomy of an angular animation
- Starts with a trigger name
- A transition pair
- Animation sequence
We declare our animations inside our component i.e.
add into the HTML element we are interested in using the
alias trigger name @ syntax.
Interactive Web animations with SVG
SVG's are scalable vector graphics image formats that are scalable without affecting the resolution of an image file. SVG is a lot like HTML, it is an alternate universe version of HTML focused on graphics instead of documents.
SVG has a DOM and therefore we can manipulate graphics with code.
SVG is built for drawing in a way that HTML and CSS are not.
SVG allows for seamless handover and collaboration between designers and developers (perfect for a designer and a coder). The world of SVG is your playground.
Tools to create SVG code
|Freepik||Resource for free SVGs online|
Use layers / groups in Adobe illustrator to arrange your vector graphics (i.e. body, hands, legs) etc. The artboard is your viewport.
Clean and Optimize your code
Clean up your generated SVG code graphic with a tool like SVGOMG and this will clean up your code by removing doctypes, removing XML instructions, remove comments & metadata, merge styles etc.
Group your elements i.e.
SVGs have an implicit drawing order therefore z-index doesn't work. (Head will be shown on top of wings)
SVG vs CSS
In comparison to SVG animations, CSS animations start to get messy at scale and for complex animation. It is difficult to chain animations therefore we have to fake chain with delays (add durations to every chained animations).
Transforms applied to SVG elements can behave differently in different browsers (transforms are fundamental). The issue os how
transform-boxhas possibility to fix this problem however it is still incompatible in other browsers.
|Anime||✅||✅||6kb||MIT Free License|
|Velocity.js||✅||doesn't have a native timeline||15kb||MIT Free License|
- DrawSVG Plugin (Drawing SVG path animations)
- MorphSVG Plugin (Morphing between different SVG paths)
- MotionPathPlugin (Perform animations on the browser using codepen instead of Illustrator)
A tween is the name of a single movement in an animation i.e. a movement in space from point A to point B or a movement of state (one color to another) and the ease of tweening is what gives your animation to life.
Timelines act like container where you can keep your tweens and help with organisations.
The best thing about web animation is to do with the user experience. Interacting on the web brings a level of playfulness, fun and creativity that's difficult to get from traditional animations i.e. web audio API.