Currently relies on disabling server side rendering
And invoking gsap methods after onMount
note: if viewing this after 1 year, CSS @scroll-timeline is probably a better option (currently it's only available in chrome, and still experimental) video
I found gsap after hitting limitations while using svelte window:scrolly binding, and the svelte package in-view (it only triggered when the object entered or left the viewport). Svelte transitions were also limited to creating/destroying object triggers. Framer motion was also similarly limited. I did hack my way around to transform objects on scroll, but it wasn't flexible. GSAP seems like a great solution for now (and much more lighweight than other solutions such as scroll-magic).
wow gsap is excellent. I'm using scrollTrigger and TextPlugin (together). I have since linked it to lottie JSON animations (made in After Effects).
note to self: use .lottie files instead of .json files to utilize the VScode lottie extension (which allows easy manipulation of frame rate and colors)
this app also displays 3 different ways to add a lottie animation. (gsap works best without the lottie-player, and just the basic lottie-web import).
CSS grid experiments
now hidden in route /v2 (or click blue button top right)
