GreenSock GSAP is amazing
by winnie
Keep Scrolling! This is a simple demonstration of how GSAP can be used to animate content on a website.
GSAP is amazing. This Library allows for great animations in my web projects.
Took me a a while to get into it, but my first attempts were also quite ambitious. I must say the docs are doing their very best to make it easy. Make sure to watch the introductory videos. The animations themself shouldnt be hard to learn for anyone who knows some CSS.
ScrollTrigger is where it gets interesting. It allows you to connect the animations to your scrolling (scrubbing). Thats what i happening right now. Opacity and Y-Position are scrubbed to the Scroller, creating this revealing effect. The whole article is pinned in place while that happens. Create an animation timeline and attach a ScrollTrigger. The hole thing is just a few lines of code.
Once again, the docs are amazing, providing introductory videos and a handy common mistakes guide. It actually covers mistakes that i made or was about to make. great stuff.
There is also a bunch of Plugins. Some of which are paywalled, but the licensing is VERY permissive, even for commercial use. Ive only taken a quick look at all of them. This is certainly a big rabbit hole to dive into. I might take a closer look at the DrawSVG stuff when i have gotten better at the free available options and feel I reached a cap.