Animating concurrent scrollTrigger elements

[henryb]

Hello,
This question builds off of a previous question about multiple scrollTriggers, with some added elements concerning page refresh and triggering the scrollTrigger from the reverse direction.

Outline:

• Page has a small header logo, that only appears when the user begins to scroll.
• Page has a large logo that appears on page load, that disappears when the user begins to scroll.

Problem:

• The scrollTriggers work well on first load, but when the page is refreshed the #headerlogo appears immediately regardless of the scrolled position.
• Toggle action to play in reverse when scrolling back to top not working for me currently.

Aim:

• Both logos should not be visible at the same time.
• #headerlogo fades in when scrolling past scroll trigger at top of viewport.
• #largelogo fades out when scrolling past scroll trigger at top of viewport.
• Animations play in reverse when returning to top of viewport.

This site has the exact behaviour I am trying to achieve: https://www.magdabutrym.com/de-en

Here is my current progress in this Stackblitz demo: Stackblitz link

Many thanks for reading!

[Rodrigo]

Hi,

 

This would be my approach:

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

 

Hopefully this helps.

Happy Tweening!

[henryb]

Thanks Rodrigo!

[henryb]

Hi again @Rodrigo

I'm working with the above approach, and it works well starting from the top of the viewport, before the scrollTrigger is triggered.

However, I'm facing the issue that if I were to arrive on this page via a back navigation, positioning the viewport below the scrollTrigger, i.e. down the page, then there is a brief flash where the '.logo-large' appears. I have tried to set the style={{ visibility: "hidden" }} on the '.logo-large' element, as well as immediateRender: false in the .to() in the timeline, but still the flash appears. 

I'm wondering if there is a way to counter this FOUC? I'm not really understanding why it is happening, and whether it is specific to the scrollTrigger.

[Rodrigo]

Hi,

 

This is not actually related to GSAP but just the way browsers work and the inner works ScrollTrigger has to do in order to do it's calculations. ScrollTrigger takes the page back to the top in order to make the calculations and make sure everything is rendered and positioned the way it should, something that is more difficult if the scroll position is not at the top. In your particular case, since you have toggleActions in your setup, that tells ScrollTrigger to play the timeline which hides the large logo and shows the small one.

 

What you could try is to store if the scroll is more than 0 (meaning that is not at the top) in local/session storage. Then when the page is refreshed you check that if it is, you could set the timeline's progress at 1. Maybe the ideas in these threads could help:

 

Hopefully this helps.

Happy Tweening!