[Scroll, zoom and pin into SVG logo]

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.)

[Help with ScrambleText]

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;

[I`m using GSAP in my NextJs app and I can`t animate object if they rendered via array map function.]

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.

[Pinned section with horizontal scrolling]

2 hours ago, n00bie said:

I would like for when my horizontal scrolling section is done scrolling, to have enough time to see the "GSAP Left to Right" section's animations. If I scroll super slowly I can see them, however if I scroll very fast I can't. Any idea on how to solve this? Thanks!

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.

 

2 hours ago, n00bie said:

Also, any way to have my "Item 7" to show up inside the container, depending on the resolution it's not always fully visible

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))

[Creating a pre-loader with GSAP3 Stroke Reveal effect]

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.

[How to create button water effect(displacement map) with newer gsap version]

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.

[How to create button water effect(displacement map) with newer gsap version]

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

[Stacking Cards: translate Y - Keep cards in postion when reaching the end pin]

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:

See the Pen BabWvxM?editors=1010 by ryan_labar (@ryan_labar) on CodePen

 

[GSAP.UTILS HELP toArray + random]

Here's an option using timelines:

See the Pen NWJpXJW?editors=0010 by ryan_labar (@ryan_labar) on CodePen

 

There's some timing issues in my super-quick example, but those should be pretty easy to straighten out.

[GSAP.UTILS HELP toArray + random]

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.

See the Pen oNVZzQd by ryan_labar (@ryan_labar) on CodePen

[Stacking Cards: translate Y - Keep cards in postion when reaching the end pin]

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.

[Jump shift on the FLIP plugin tutorial]

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

[Error when registering trial version of ScrollSmoother]

28 minutes ago, Squirello said:

The trial plugins only work locally

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

[Error when registering trial version of ScrollSmoother]

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

[Gsap Pathanimation not working in iOS]

13 minutes ago, GreenSock said:

Safari

Nor is FireFox

[Gsap Pathanimation not working in iOS]

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.

[Stagger animation not coming out smooth]

2 hours ago, Ian Robinson said:

Possibly due to my HTML/CSS structure?

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

[Pause Marquee on Mouse Hover not working!]

3 minutes ago, diqqa_1909 said:

pauseOnHover: true,

This isn't a GSAP property.

[Animated Christmas Tree]

8 hours ago, blumaa@gmail.com said:

Hi all! I made a little animated Christmas tree for the holidays and I thought I would share it here. Any feedback or criticism is welcome. Thank you. best wishes during the holiday season!

 

https://stackblitz.com/edit/animated-christmas-tree

Thanks for sharing!

 

[Horizontal scroll pinned element has a Y-transform being applied]

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.

[GSAP with React, Navigation not working as expected]

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

[GSAP with React, Navigation not working as expected]

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()

[Scrolltrigger Pinning w/ Observer not working when Lenis added]

6 hours ago, GreenSock said:

It's totally fine if you prefer Lenis - you shouldn't feel bad at all about using that with GSAP just because we also offer ScrollSmoother.

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.

[Scrolltrigger Pinning w/ Observer not working when Lenis added]

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?

[Draggable Content]

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:

See the Pen GRxNJGK?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

and

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

and

See the Pen WNedayo by GreenSock (@GreenSock) on CodePen