Animating an element via ScrollTrigger and also separately on page load — conflict issue

[henryb]

Hello,
 

I am trying to animate an element in when the page loads, and also whenever the user starts to scroll I want to animate that same element out. 

So far I am able to achieve this, but not optimally, because the out animation is not exhibiting the specified duration. The out animation is triggered with scrollTrigger, and it simply should animate the autoAlpha to 0, to make the element disappear over a duration of 2 seconds. Currently, it abruptly disappears, rather than animating out for the course of the specified duration.

Here is my minimal reproduction to demonstrate my issue: Stackblitz

To summarise what I am trying to achieve:
1. Logo fades in on page load
2. When user begins to scroll down, the logo fades out as a result of a scrollTrigger

Currently happening:
1. Logo fades in on page load
2. Logo disappears abruptly without fading out when scrollTrigger is triggered

Notes:
1. If the useGSAP() code for the scrollTrigger is moved to the parent, to the page level, the scroll trigger animation fades out as intented — but only when I change the gsap.to() to a gsap.fromTo(). I don't understand why.
2. Moving this code to the page level solves the scrollTrigger (somewhat) but there is a new issue with the logo flashing when the page loads.

Many thanks in advance for any suggestions on where I am going wrong 

[mvaneijgen]

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

[henryb]

Hello @mvaneijgen thanks for the response! That's great to understand the use for immediateRender: false

 

That has fixed the scrollTrigger animation. However there is still a peculiar issue with the element flashing when the page first loads. Actually it wasn't visible in Stackblitz in the small preview browser window, but when you click to view the browser view at full viewport size, and then give the page a hard refresh, you can see the svg appear, then disappear, and then animate in.

Any ideas about how I can avoid this? At first I wondered if it was anything to do with React Strict Mode, but no luck. Could there be an issue with forwarding the ref the way I am doing? I also tried to add a gsap.set('.logo', { autoAlpha: 0 }) before my fromTo() but again with no luck. Notably, a regular refresh does not present the issue, but the very first page load does.

[henryb]

Ah, it seems to be fixed by setting style={{ opacity: 0 }} on the svg: Stackblitz

Thanks again! 

[mvaneijgen]

Glad you've solved it, be sure to check out FOUC guide https://gsap.com/resources/fouc/ there is a detailed guide how you can avoid these kinds of things. Happy tweening!