Allow timeline to run even when it's already in view when page opens?

How To
1

I assume I have missed a configuration somewhere, or maybe this is normal behavior?

I have a parent element with class “.stagger-children” and I use this as the trigger to animate all the child elements with " .stagger-children > * ".

These are animated with a scroll trigger. I have “Handle triggers separately” turned on since there could be multiple containers where I stagger the children in this way.

On the timeline, the child selector what I showed above. I then have stagger enabled with 0.35.

This seems to be a very basic and normal setup?

Anyway, here are the oddities.

  1. In the Bricks animation panel, the animation doesn’t run or preview. When I click “Run”, nothing happens. I don’t get a preview of the animation. No idea why.

  2. In the frontend when I scroll down the page where the container comes into view, it animates perfectly, all good. This is how I know it’s configurate at least partially correct.

  3. If I refresh the page with the container already scrolled into view, nothing happens, it’s just instantly loaded with no animation at all. Why? I still want it to animate one time even if it’s already in view.

What settings can I change to try and correct this?

What settings do I check or what do I debug to make each of these points work right? I’m probably just doing it wrong.

2

Hey :slight_smile: This behavior can be controlled by “Toggle Actions”:
https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#toggleActions

You can find the related field in the timeline settings. The Trigger must be “ScrollTrigger” in this case.

3

My trigger is scroll trigger. The toggle actions are as default.

I don’t see how that affects things when the page is first opened for the first time. There is no reversing or going out and in and so forth, it’s just the initial page load.

What would be the toggle action string that lets it animate when it scrolls in AND if it’s already in view when the page opens?