Great website for inspiration and learning
With tutorials such as :
Tag: animation
Video: Web Performance Mini Series: Animations (Paul Lewis)
By Paul Lewis. See also his article on HTML 5 Rocks:
https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Even more links:
- https://eu.udacity.com/course/browser-rendering-optimization–ud860
- https://developers.google.com/web/fundamentals/performance/rendering/
- https://aerotwist.com/blog/flip-your-animations/
- https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse
- https://aerotwist.com/blog/the-anatomy-of-a-frame/
Takeaway of this video:
The magic goal: 16ms
For 60HZ monitors aim for 16ms delay or less. (60fps = ~16ms per frame).
Delays above that will make the animation look janky
Note: for the 120HZ monitors that are getting more common these days the magic number would of course be 8 ms.
Fix for ‘text scale animation cause font to blur’
text scale animation cause font to blur – posted in GSAP: When using Chrome the text is blurred during the animation and then at the end the text snaps clear and normal. Does not do that with Firefox or Edge. How do I get rid of the blur when viewing with Chrome. Thank you, Kv2
Source: text scale animation cause font to blur – GSAP – GreenSock
It’s a common Chrome bug.
Adding
CSSPlugin.defaultForce3D = false;
to your Javascript file will fix it.
//
You might also find this post helpful: http://greensock.com…ted/#entry36948
clouds with GSAP
Source: clouds
A Comparison of Animation Technologies | CSS-Tricks
Source: A Comparison of Animation Technologies | CSS-Tricks
A really nice overview of pros and cons of current (2016) animation technologies. Some of the main points below. For detailed information, visit the link
Native animation
- CSS
pros: great performance, responsiveness.
cons: chaining multiple animations complicated, quirkiness in css+svg - Canvas
pros: really nice for interaction, good performance
cons: difficult to make accessible, difficult to make responsive, not retina-ready - SMIL
cons: losing support - Web Animations API
pros: Easy sequencing of animations, good performance
cons: Support is not great, specs still changing - WebGL
pros: Really good in interactive and 3D effects, amazing visual effects, hardware-accelerated, VR-possibilities
cons: Tougher to learn, hard to make responsive