Hello Bricksforge Team and Community,
I’m facing a persistent issue with ScrollTrigger.batch() that I haven’t been able to solve despite extensive troubleshooting. I’m hoping someone here might have a crucial tip.
My Goal:
I want to animate multiple elements with a class as they enter the viewport. This should work reliably in both directions:
-
Top to Bottom: When an element enters the viewport while scrolling down (onEnter).
-
Bottom to Top: When an element enters the viewport while scrolling up (onEnterBack).
Each animation should only be triggered once (once: true).
The Problem:
Scrolling down (onEnter) works perfectly. The issue occurs exclusively when I reload the page while positioned at the bottom (e.g., in the footer):
-
The page loads with the scroll position at the very bottom.
-
ScrollTrigger immediately evaluates the state and correctly determines that all .fs-fade-in elements are located before the current scroll position.
-
As a result, it fires the onEnter callback for every single batch from top to bottom.
-
Because once: true is set, each of these triggers is immediately destroyed after its onEnter callback runs.
-
Now, when I start scrolling up, nothing happens. The onEnterBack animation cannot be triggered because the corresponding triggers are already “dead.” The content remains invisible (as it was initially set to opacity: 0 via gsap.set).
What I’ve Already Tried (Without Success):
I’ve attempted virtually every known timing-related fix, but the fundamental evaluation logic of ScrollTrigger remains the issue:
-
Various setTimeout delays (up to 2 seconds).
-
Manually calling ScrollTrigger.refresh() and ScrollTrigger.killAll() before initialization.
-
Temporarily disabling with ScrollTrigger.disable() and re-enabling later with ScrollTrigger.enable().
-
An “interaction gate” that only enables animations after the first user scroll.
My Question:
How can I explicitly instruct ScrollTrigger to ignore this initial state evaluation on page load? Is there a specific Bricksforge setting or a GSAP property that prevents onEnter from firing for triggers that are already “passed” when the page initializes?
It feels like this should be a common scenario, but I simply can’t find the correct solution. I would be extremely grateful for any help or insights.
Thank you and best regards