Aos: Remove .aos-animate class when element is scrolled past

[LucaRosaldi]

Hi, for a site I’m building I need some elements to disappear when the page is scrolled past them.

So I wondered if there was some way to remove the class not only when the element is _below_ the current page fold, but also when it is scrolled past and the element is _above_ the fold.

[LucaRosaldi]

Made a pull request for this: #41

[michalsnik]

Hi @LucaRosaldi , sorry for such a delay. Finally I got some time and I reviewed your PR.

Thanks for creating PR with this great feature, which I think more people might be interested in :)

I was thinking about it and I left a comment with my concern in PR discussion.

[ericvrp]

Could we please have this feature?

[gerardreches]

The Waypoints library has a shortcut for this. I tried both libraries and I really prefer AOS, so it could be great if AOS can add this feature.

As a workaround I was thinking on create a custom reverse animation and using a wrapper to trigger it on data-aos-anchor-placement="top-top".

[yusupprog]

Hi. Has this feature been implemented?

[Smiroldo]

I'm needing this feature as well. We need to animate a box before and after a certain anchor point... For example, animate a box from left when scrolling is ~250px from anchor point. Then animate OUT same box when ~250px PAST anchor point.

So, as user is scrolling, the box will fade in from left – stay for a while as they scroll – then fade-out animate off-screen (the same way it came in - but in reverse). If user reverses scroll, it'll animate back in, stay for a while, and then fade back out a little after the anchor point. Therefore, animation will work exactly the same whether they start from the bottom of the page or top.

This isn't currently possible with AOS, is it? The way the structure is set up, it looks like this type of effect would be extremely difficult or impossible. Hopefully that's not the case.

[michalsnik]

I just released v3.0.0-beta.1 that has new setting called mirror. That does exactly what @LucaRosaldi proposed and initially developed :)

You can play with it by installing:

yarn add aos@next

Or look at the docs: https://github.com/michalsnik/aos/tree/next

[Frey1]

gj bro

[rae0724]

I just released v3.0.0-beta.1 that has new setting called mirror. That does exactly what @LucaRosaldi proposed and initially developed :)

You can play with it by installing:

yarn add aos@next

Or look at the docs: https://github.com/michalsnik/aos/tree/next

Great, but what if I want to have different animation and direction after the fade in
Let's say
"the box fade in from left – stay for a while as they scroll – then fade-out animate off-screen (fade to right, opposite way of go in)"

[Rut-Rocks-12]

I just released v3.0.0-beta.1 that has new setting called mirror. That does exactly what @LucaRosaldi proposed and initially developed :)
You can play with it by installing:

yarn add aos@next

Or look at the docs: https://github.com/michalsnik/aos/tree/next

Great, but what if I want to have different animation and direction after the fade in
Let's say
"the box fade in from left – stay for a while as they scroll – then fade-out animate off-screen (fade to right, opposite way of go in)"

Any Update on this....