Animation do not trigger on first render

[GreenSock]

If you'd like some help, please isolate the issue in a brand new, SUPER simple demo. There's just way too much going on in what you've shared in codesandbox and it takes forever to build. It's not even displaying anything for me. Sometimes it crashes the browser during the build process.

 

The simpler your demo, the greater your chances of getting a good answer here

 

Don't forget to register the ScrollSmoother plugin too.

 

I'm just curious - if you use a .to() tween instead of a .from() tween (regardless of the values), does it work? Is it ONLY the .from() that won't work? 

[Kovsky]

Ok last try for me, it's the smallest demo i can provide --> https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx

 

No Redux, no Styled Components, no GraphQl,  just 2 classic components and a layout. I hope it is not too much code.
Maybe i should stop  try to use Gsap with React ?
 

Quote

I'm just curious - if you use a .to() tween instead of a .from() tween (regardless of the values), does it work? Is it ONLY the .from() that won't work? 

i've tried this 10 times since you first mentionned it few days ago

 

Quote

 

Don't forget to register the ScrollSmoother plugin too.

it's done thank you.

 

Thank you for the help.

[GreenSock]

Sorry, I have tried about 10 times and the sandbox just won't run. "Bad gateway" errors sometimes, or "The path passed to gatsby-source-filesystem does not exist on your file system" errors. Takes forever to attempt to compile too. Sorry, no dice. 

 

I did notice that you were importing gsap from "gsap-trial" (regular module) but all the other plugins you were loading from the /dist/ directory (UMD files), like "gsap-trial/dist/ScrollTrigger". I would definitely recommend being consistent with those, so import gsap from "gsap-trial/dist/gsap".

 

As an experiment, I'd recommend putting your code into a setTimout() that waits a second or so before executing so that you're absolutely POSITIVE that the entire page contents exist when ScrollTrigger does its measuring. I'm just wondering if your code is running when the page isn't fully rendered, throwing off the start/end positions. 

 

As another experiment, I'd console.log(yourTween.scrollTrigger.start, yourTween.scrollTrigger.end) and see if those values change when you refresh the page ABOVE versus BELOW the start. 

[Kovsky]

thank you for your time.

It's ok to get the 502 badgateway 

 

you need to choose the tab with the 8000 port

but the most important part, it's working with this workaround

 

    setTimeout(() => {
      gsap.to(splitIntroPresentation.lines, {
        scrollTrigger: {
          trigger: refIntroPresentation.current,
          start: " center center",
          markers: true,
          id: "test"
        },
        duration: 2,
        ease: "power4.out",
        y: 400
      });
    }, 10);

 

Thank you Cassie, Thank you Jack

 

[GreenSock]

Ah, so it works if you add a slight delay? That tells me your page wasn't rendered and it didn't call the window.onload when it was finished. So all you need to do (in theory) is just make sure you call ScrollTrigger.refresh() AFTER everything is settled and your page is fully rendered (and then you don't need to add that setTimeout() delay). I imagine there's a lifecycle event for that or something.