Question: Trigger animation on page load

[love-digital]

I might be missing this in the documentation, but is it possible to trigger the animations once the page loads? Right now I have elements that are being watched by Scroll Out that are already in the viewport when the page loads. I would like them to animate in as if they were moving into the viewport, I hope that makes sense.

I can email you the site if you need to see an example.

[notoriousb1t]

I think if you did initialized data-scroll="out" on the elements, that would get you the transition.
People with JavaScript turned off would never see these elements, so whether that is okay or not depends on your situation.

You might be able to add a class to the html itself and then remove it in the onShown(el) event handler and that might give you a safe way to start the animation on startup.

[love-digital]

OK, will mess with that. Unrelated, is it possible to have a negative offset without using CSS vars? Let's say I have a sticky have and I want to collapse some elements when I am halfway through the element.

[notoriousb1t]

You can set a threshold when you initialize ScrollOut({ threshold: .8 }) which is the amount visible before it is considered "in". https://scroll-out.github.io/guide.html#configuration

If this is for the navigation on the site. I would recommend looking at the offset property instead. It is important to note that you can initialize ScrollOut more than once to target different things provided you add the targets property instead of relying on data-scroll for the secondary targets.

[notoriousb1t]

Closing due to inactivity. If you have further questions, please comment and reopen this issue. 😄