Awesome
Learning GSAP (GreenSock Animation Platform)
Basically the best from both CSS and jQuery: fast like CSS animations, but higher control and browser compatibility like jQuery animations.
Just one of the things I'm learning. https://github.com/hchiam/learning
Setup
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
or: npm install gsap
Quick reference
Clickable props link to docs: https://gsap.com/cheatsheet (used to be https://greensock.com/cheatsheet)
Learning
- Tutorials: https://greensock.com/learning
- https://www.youtube.com/watch?v=YqOhQWbouCE and https://www.youtube.com/watch?v=oNXX2iww5Is
Further references
- Most popular features, with codepen demos: https://greensock.com/get-started
- Draggable: https://greensock.com/draggable
- Forked ScrollTrigger demo: https://codepen.io/hchiam/pen/xxdQgVP shows how easy it is to do scroll-based animation
Why
Certain properties for CSS animations are hardware-accelerated, and simpler animations can be done with CSS, but for better perf than jQuery animations and more complex animation control than can be easily-manageably done with with CSS, use GSAP.