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