elegantseagulls

I like the ability up upload assets and create private pens. I prefer it over codesandbox, mainly for ease of use.

@Carl's courses are awesome: https://www.snorkl.tv/ So are @PointC's: https://www.motiontricks.com/

Because that animated circle text is being appended as a child of your cursor, so it's getting the scale property from its parent.

Will try this Monday!

Is this a private repo? I'm receiving a 404.

Can you set up an MVP via CodePen or CodeSandbox? Downloading a JS file isn't an ideal way for us to debug the issue, and you'll likely be able to see what's happening if you break it down further.

This is tricky because you'll have to tween the h3 back to its original position, or it doesn't have a context of where it's really starting from... With what you have going on the forEach, you are creating a new timeline for each iteration. This solution adds to a single timeline onEach, then goes back to its original position: https://codepen.io/ryan_labar/pen/JjyMpRx?editors=0110

Tough to say from just screenshots, but your syntax seems to be good.... is there a specific reason for posting two screenshots? Are you able to reproduce in a CodePen? Are you loading the ScrollTrigger CDN? Are you registering the ScrollTrigger plugin? (gsap.registerPlugin(ScrollTrigger)) Does GSAP work at all? If not, are you loading GSAP before your custom js?

Honestly it's really difficult to debug this with out a codesandbox or similar. You'll want to do your garbage cleanup in a return function at the end of your useEffect: useEffect(() => { const tl = gsap.timeline() ScrollTrigger.create({ ... id: 'mytrigger' }) return () => { tl.kill(); ScrollTrigger.getById('mytrigger').kill(); } }, [])

@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, { ... }) });