OSUblake

It can be controlled by any trigger you want. It works the same as every other kind of ScrollTrigger animation. If you have multiple animations then would need to duplicate the process. Create another canvas and similar animation.

Hi modulareverything, fullPage is not a GSAP product, so this would be a question more for fullPage support. I'm assuming you might need to tap into their callbacks. https://github.com/alvarotrigo/fullPage.js#callbacks

How do listen for route changes? I think you need to kill your ScrollTriggers when that happens, but I'm not super familiar with react router. onRouteChange() { ScrollTrigger.getAll().forEach(t => t.kill()); }

Putting a timeline in a ref is only for when you need to access that timeline outside of an effect. But a making a minimal demo on CodeSandbox will help with troubleshooting your issue.

You could probably use the onReverseComplete callback to remove the class. gsap.timeline({ onReverseComplete: () =>accordion.classList.remove("expanded") })

Welcome to the forums @remma ScrollTrigger has to do because it needs to measure stuff with the scrollbars as they might take up width, like on Windows. You could just revert after refresh, kind of like here.

Hi tracta, You only need 1 timeline, and for snapping, check out GSAP's utility methods. We can use some of those animate the progress of the timline. GSAP Circular Carousel (codepen.io)

Welcome to the forums @Matt K You could certainly animate something like that with GSAP and ScrollTrigger. Rendering liquid it is a completely different story, and will almost certainly require using some sort of canvas/WebGL renderer like PixiJS or Three.js and probably a physics engine. That's possible. You would just have to move stuff around on the canvas to match the current scroll position, kind of like what is shown here with the orange boxes, which are being rendered in Three.js. https://codepen.io/ashthornton/pen/874833fdebc032bedd0cf61e9eac3ee9

Welcome to the forums @darkFly I'm having a hard time following your code. Like why are doing 2 Flips on the same state? Flip.from(closedPanelsState, { duration: 0.5, onComplete: () => { accordion.classList.toggle("expanded"); Flip.from(closedPanelsState, {}) } }) I think it would be a lot easier to understand if you refactored it into a timeline so you didn't have so many onComplete callbacks. Flip returns a timeline so you can add to that... Flip.from(state) .to(".foo", {}) of add a Flip to a timeline. gsap.timeline() .to(".foo", {}) .add(Flip.from(state))

Welcome to the forums @ajswebdesigns It's very hard to troubleshoot a live site. Can you put just that header animation inside a minimal demo? Thanks!

I don't know. That would be a question more for fabric.js. GSAP is an animation engine, so it doesn't control how stuff gets rendered.

There's probably not an easy way to do that. You could try with the MorphSVGPlugin, but it might not work well depending on how complex your trees are. And then if you have a bunch of trees, you're probably going to be running up against the performance limitations of SVG. I made some grass blades, and the shape of blade is relatively simple, but SVG could not handle animating a screen full of them. https://codepen.io/osublake/pen/JYpOOK

Hi GM_sql, CSS transforms are reported as a matrix... console.log(getComputedStyle(myElement).transform); // matrix(1, 0, 0, 1, -100, 0) So there is no way for GSAP to know that the -100 in that matrix is supposed to be a percentage. Before you start animating, you should set your transforms with GSAP. GSAP will then be able to keep track of what is a percentage and what is a pixel value. gsap.set(".foo", { xPercent: -100, x: 0 });

Hi Lucas, We use priv.js for the that, so you may want to reach out them. https://privjs.com/

How about this demo? It uses a scroll container, but doesn't seem to have the same problems. Pair with CSS Scroll Snapping - ScrollTrigger (codepen.io)