elegantseagulls

@obaidnadeem This is definitely using some sort of WebGL for the rendering. GSAP works great for animating WebGL objects (Lots of example on the forms here). Interestingly enough, there's a Twitch Stream today covering using GSAP with WebGL shaders:

Yeah, they are using Canvas for the image effects (which I'd imagine is being controlled by GSAP behind the scenes) the effect likely using something like quicksetter to track and animate mouse locations, and that position to determine how the canvas elements are reacting to that. https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

Might be able to dissect this pen a bit to get what you're looking to achieve, functionality wise: https://codepen.io/elegantseagulls/pen/wvazXLe Obviously bit more going on than what you're looking to do, but it's still tweening a path with text along it still.

Have you tried pinSpacing: false? https://greensock.com/docs/v3/Plugins/ScrollTrigger

Really not sure what you're asking... The example site seems to be down, and your explanation is quite confusing. I'm thinking maybe you are looking to keep the background image a fixed size while you scale the foreground? You could do that a few ways, but I'd suggest starting as a clipping path instead of the mask, and targeting that path specifically instead of the entire SVG... You could also scale the image inversely to the svg scale, something similar to: https://codepen.io/elegantseagulls/pen/yLgMVpG

You'll likely just want to do something like this: const the_purgatories = document.querySelectorAll('.the-purgatory'); the_purgatories.forEach((purgatory) => { gsap.to(purgatory, { ... }) });

It looks like you're using react-three, check the docs there on how to update an object's render and use GSAP's onUpdate, gsap.ticker, or rAF to update the view as you animate it. Here's an example of animating three.js with scroll trigger: https://codepen.io/ste-vg/pen/GRooLza?editors=1010

It's difficult to debug this without a minimal example, can you setup a CodePen or CodeSandbox to replicate the issue? Generally speaking though, you'll need run a render function for your GL/canvas via the GSAP Ticker, rAF, or onUpdate in order to make the actual rotations work.

Are you having trouble implementing this? Or were you just theorizing?

Why not just use absolute values (example: x: 10)? Since it's using the SVG coordinate system, it should remain responsive as the SVG resizes.

That example is using ScrollTrigger with GSAP, it's a pretty straight forward effect. You are pinning the current block you are on, and scrolling content over the top of that. Check the main docs here: https://greensock.com/docs/v3/Plugins/ScrollTrigger This is a good resource: https://www.creativecodingclub.com/courses/scrolltrigger-express?ref=44f484 This covers the main idea: https://codepen.io/GreenSock/pen/KKpLdWW

Yes, you'll need to register your plugin gsap.registerPlugin(ScrollTrigger), and will also need to import the ScrollTrigger files. Good info here: https://greensock.com/docs/v3/Installation Scroll down to the GSAP 3 Install Helper and look at the Modules section (if you're using next you'll need to import from 'dist', instead). (you also called it ScrollMagic in your original question, which is a "competitor" product to ScrollTrigger)

At first glance: you'll want to put your scrollTrigger property in the second (to) object of the fromTo: gsap.fromTo( ref.current, { opacity: 0, y: 32, }, { scrollTrigger: ref.current, opacity: 1, y: 0, duration: 1, stagger: 0.2, } );

Yes, you don't want to nest ScrollTriggers. I've not tried batching with scrub, personally, so that may require some reading/playing around.... Why are you trying to avoid a forEach? GSAP's built in functionality on that is likely not going to save you any performance in this instance.

You'll have to create some logic that looks at current x and y positions and limits the next next move if the += goes over that. Something like: if (currentXPosition + xMov > xBoundry) { xMov = `+=${xBoundry - currentXPosition}` } else { xMove = `+=${moveUnit}` } or better yet, you could use the gsap clamp utility to keep your position within certain bounds: https://greensock.com/docs/v3/GSAP/UtilityMethods/clamp() gsap.to(el, { x: gsap.utils.clamp(0, 900, currentPosition + moveUnit) })