Scrolltrigger (pin-spacer) does not load complete height (in Firefox)

[yve]

Hello all, first of all - really love your work, efforts and support in the forums.

 

To my problem:

I have a pinned section with animating elements inside (4 timelines with animations running one after the other). Actually it works pretty fine in almost all browsers - except firefox. I have a bug there, where on first load of the page sometimes the "pin-spacer" does not load enough height so the below sections "run over"/overlay the animating section when scrolling.

 

When refreshing the page, the height of the pin-spacer is correct, and everything works like it should.

 

The animations involve:

• the section for the animations is set too 100vh and pinned;
• the animation timelines involve (position: absolute) Elements fading in and out (opacity) and text animation similar to typewriter effect
• the timelines are triggered by invisible bars with %-defined heights

 

I don't know if I can reproduce this problem in a CodePen since my animation is also integrated into a CMS (Weblication) System...maybe someone has a solution at hand from this description (if not, I will give it my best trying to reproduce the problem)

 

Thanks in advance & greetings

[SteveS]

It sounds like your gsap is firing before the page finishes loading. Make sure all your gsap goes into a load event, and if that doesn't work try refreshing your scrollTriggers after a few seconds and see if that changes anything.

[yve]

So I found a solution (at least the bug does not occur anymore):

the refresh did not do anything for me. So i tried restructuring my elements: I put the elements, which trigger the animation timelines, at the BEGINNING of my HTML body.

Before that: they were located at the end after my whole HTML content (but positioned absolute to the beginning of the page).

Now it calculates the hight correctly. Thank you for the hint though.