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://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.

• https://stackoverflow.com/a/39889847
• https://greensock.com/transitions
• https://greensock.com/why-gsap
• https://css-tricks.com/tips-for-writing-animation-code-efficiently
• https://greensock.com/css-performance