ryan_labar

There's two approaches for this. The path of least math would be to use FLIP https://gsap.com/docs/v3/Plugins/Flip/, having your target container set at 500vw (seeing as your target white space is 1/5 the width of the SVG) (for mobile devices you could set a breakpoint for portrait mode). The other approach would be to calculate the amount it needs to scale based on viewport width... The math would look something like: (window.innerWidth / svgElement.offsetWidth) * 5. Note that this would need to be recalculated on each screen resize. (Also note you may need to re-math this for mobile devices.)

Most fonts have different widths for each character, which will cause the text to change widths as the characters change. A Monospace typeface will is the easiest fix for this: most font libraries have a filter for this if you need something more custom, but you can use your system's default by this to your CSS: font-family: monospace;

You'll also want to be careful of trying to animate images before they load, as they could calculate as 0 for the height and 50% (yPercent) of 0 is 0, so they may not move.

scrub: true is one way to solve this. You'll loose the smoothing effect, but it'll tie the animation directly to the scroll, otherwise it's taking .8s for the animation to catch up, and if you scroll too fast, you're missing the end. Your math isn't accounting for the 64px gap. You'll want your math to be: (offerItems[0].offsetWidth * offerItems.length) - (64 * (offerItems.length - 1))

Hi @stemolti, And welcome to the GSAP forums! This page is a good starting point: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ Some inspiration here: https://codepen.io/collection/DYmKKD?grid_type=grid Note: The DrawSVG plugin isn't required to create the effect you're looking for, but it makes it really simple, as it does all the complex SVG stroke calculations for you, which is well worth it, IMO.

Please avoid @-ing specific moderators, as it's rather impolite. I'm not seeing a button on your website's example, and your CodePen still isn't properly linking the the distortion image, but I'm assuming you're looking to improve the distortion effect on the '0' in '404', is that correct? It would be easier for us to help debug this if you updated your CodePen with the actual effect you're looking for—my guess is that the differences you're seeing in the effect are due to timing, scale, and that your image has a solid fill rather than an outline, but without a codepen properly showing this it's rather difficult to debug.

Are you able to link this image to your SVG in your CodePen? xlink:href="img/ripple.png" is 404ing.

Is there any reason you need to animate the cards onUpdate? A scrub animation seems like it'd be the better option here. Something like this: https://codepen.io/ryan_labar/pen/BabWvxM?editors=1010

Here's an option using timelines: https://codepen.io/ryan_labar/pen/NWJpXJW?editors=0010 There's some timing issues in my super-quick example, but those should be pretty easy to straighten out.

Here's another approach that I got to randomize, but doesn't re-randomize on repeat for some reason. I'll look more in the morning.https://codepen.io/ryan_labar/pen/oNVZzQd

Yes, translating the y value here is causing the wires to get a bit crossed. You could consider using yPercent to avoid this: gsap.to(card, { yPercent: -progress * 6.25 }) I got the 6.25 value by: (desired y value) / (card height) * 100 to get the percentage. 25/400*100.

I'm not able to replicate this in my browser.

Learned something new today! Hopfully @Rodrigo can find a fix for ya!

I'm pretty sure the trial files are only designed to work on a few sites, like CodePen. https://gsap.com/docs/v3/Plugins

Nor is FireFox

I'm not sure that SVG can accept CSS custom properties in non-css-editable attributes, like `r`, or, if that's part of the spec, most browser's aren't sure what to do with it yet.

This is exactly what's happening! Your css transitions are fighting with the GSAP animations. If you remove the CSS transitions your animations should work smoothly as intended. More info here: https://gsap.com/resources/mistakes#using-css-transitions-and-gsap-on-the-same-properties

This isn't a GSAP property.

Thanks for sharing!

I'd also wonder if some content is being loaded (like images) after your GSAP/ScrollTrigger code, and that's causing the jump. Try running a ScrollTrigger.refresh() after all the dom element's on you page have loaded. Also, as @mvaneijgen said, it's a good idea to be on the latest version of GSAP.

You're timeline conditional (if (!tl.current) return) shouldn't be in the useGSAP. It's preventing your animation from being created.

You look to be on the right track. You'll want to make sure, in your useEffect, that TL exists (I didn't have a chance to fork your demo, so I'm shooting slightly in the dark) with if (!tl.current) return;--this should, hopfully get rid of your console errors on load. And also your play reverse code could be improved to something like: showMenu ? tl.current.play() : tl.current.reverse()

I hope my comment didn't come off as preference shaming. I haven't looked at Lenis in a while, so I was generally curious.

You might check this thread out. It's late here, so I've not had a full chance to deep dive on what you're experiencing. Also, just wondering why you chose Lenis over ScrollSmoother?

I'm thinking that because you're using draggable to modify an animation, you'll want to setup a proxy element to use as your draggable item to update the slider's position. Similar to what's happening here: https://codepen.io/elegantseagulls/pen/GRxNJGK?editors=0010 and https://codepen.io/GreenSock/pen/gOvvJee and https://codepen.io/GreenSock/pen/WNedayo