Getting Started With web Animation
WHY
You are already animating
You're not animating well
Cut Based Animation is Bad
Permission for using Images from Animation At Wrok was provided by Rache Nabros
If you Don't Do the work
your user Will
Permission for using Images from Animation At Wrok was provided by Rache Nabros
Use Your User's GPU
Permission for using Images from Animation At Wrok was provided by Rache Nabros
Images from Animation At work
If you're interested in more I highly recommend it
Rache Nabros
Principles
There's more in the references
Illusion of Life
Easing
more custom easing from GSAP
checkout cubic-bezir
Space Awareness
Read More resources
UX Animation Principles
Principles of UX
choreography
Animation At Work
Jedi Principles of Animation
9 Rules of functional animation
Medium
SVG
Drawing Path
Animation techniques
CSS Transition
See the Pen <a href='https://codepen.io/amrdraz/pen/YEZBKP/'>CSS Transitions</a> by Amr Draz (<a href='https://codepen.io/amrdraz'>@amrdraz</a>) on <a href='https://codepen.io'>CodePen</a>.
CSS Keyframes
See the Pen <a href='https://codepen.io/amrdraz/pen/EbWrPM/'>Keyframe animation example</a> by Amr Draz (<a href='https://codepen.io/amrdraz'>@amrdraz</a>) on <a href='https://codepen.io'>CodePen</a>.
Connecting Path
See the Pen <a href='https://codepen.io/amrdraz/pen/gXmGVe/'>path rope css animation</a> by Amr Draz (<a href='https://codepen.io/amrdraz'>@amrdraz</a>) on <a href='https://codepen.io'>CodePen</a>.
more Refrences
CSS Animation vs Web Animation API
A small course on CSS Animations by DevTips
For more application try
SVG Animation
- by
Sarah Drasner
You can read it under the free trial here
I recommend you also checkout courses by
Rachel Nabors
To stay up to date
Subscribe to
Web Animation weekly
Title
Made with Slides.com