scrolltrigger ScrollTrigger doesn't work on first load (have to reload page for it to be animated correctly)

[mmarco]

Hi, im trying to make a Scrolltrigger animation with a grid, that has tiles in it, the tiles should come in from the bottom staggered as they are now, to recreate the problem i made a stackblitz demo:

https://stackblitz.com/edit/sveltejs-kit-template-default-tcgsr9?file=src%2Froutes%2Fstyles.css,src%2Froutes%2F%2Bpage.svelte,src%2Fcomponents%2FGridContainer.svelte

so when you first start the server and scroll down, the grid is placed way too low (where it would usually start when animating the scrolltrigger) but it doesnt animate, upon reloading the page, it animates as expected.
I put a green square below it to show the displacement at first, it happens every time, if i stop the server with Ctrl+C and start it up, on first load the grid is way too low and doesnt get animated. for the +page the Grid is inside two wrappers, the 2nd wrapper is there because of different components that i have in a column in between other components, i could solve it without the inner wrapper but im not sure if thats the problem, since ive tested it without it aswell...

I attached 2 Screenshots of what it looks like for me, the 1st one is after reloading, what it should look like and the 2nd one is when i first start the server, when it doesnt animate with Scrolltrigger


Any help or advice on whats wrong and how to fix it, is appreciated.
Thanks in Advance!

[mmarco]

i might've actually found the Issue, i accidentally left this: 

transition: transform 0.2s, background-color 0.2s, z-index 0.2s

in my CSS which i think messed with the Scrolltrigger, ill look into it some more to make sure though

Edit: seems to have actually fixed it... what a stupid mistake, lol

[Rodrigo]

Not a stupid mistake at all, just things that happens to everyone 😉

 

In case you're curious about why this happened, you can read more about it here:

https://gsap.com/resources/mistakes#using-css-transitions-and-gsap-on-the-same-properties

 

Happy Tweening!