Stagger SVG Children with GSAP

Get the cloneable for this project (affiliate link)
webflow.grsm.io/svg-stagger
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@shaneomac151]

TRICKS your content and the quality is unparalleled! Thank you for this!!

[@ryangabrinao8452]

this is crazyyy!!! thanks for this!

[@bradleeeey1]

Amazing technique Tim, thanks for sharing

[@Sergy_Kondrashin]

Wooooow! Thank you! Amazing as usual!

[@magdasokolovic]

I am so happy to discover your channel!

[@Dezenaamisnietbeschikbaar]

Another great tutorial! Thanks Tim

[@jaidenfahey]

This was an awesome tutorial and super appreciated. Leaving this comment for anyone else that may have run into the same issue I did...
If you add this to a website with content existing above it - add img height and width sizes OR make ScrollTrigger to refresh after everything has been lazy loaded (code added below).
This will make the animation stop triggering early (because it's starting point is been created on page load - which doesn't have the true page size). This might be obvious, or I might be wrong in my explanation, but it helped solve my issue!
Here's the code to refresh the position after imgs are lazy laoded:
document.querySelectorAll("img").forEach(img => {
if (img.complete) {
ScrollTrigger.refresh();
} else {
img.addEventListener('load', imgLoaded => ScrollTrigger.refresh());
}
});

[@ChrisMooreOfficial]

Wow… truly amazing. 🙌

[@joergfrank]

So cool. I was searching for that last Friday :) Thx so much.

[@Agileslick]

Thanks for the great animation

[@shaunazar]

Great video, love your channel. Keep it up!

[@sam-harrison]

Awesome as always dude 👍

[@admin777ist]

I just finished the site with this Interaction, but I used the scrolling sequence image) Next time will use this tutorial, Thank you for this Lesson!

[@donjuco242]

Dang!! Thanks for sharing 🔥

[@TheInfinites]

Awesome!

[@HORDERARII]

wow, thanks

[@joaolucaswork]

awesome 🔥🔥🔥

[@chakhmanmohamed9436]

How do you add that external code?

[@adreanlagnason3512]

Em....when we finished to compose how to get it out ?

[@saharlogmari1622]

lol look at tNice tutorials dude