CODEWITHSUNDEEP
angularanimate-on-scroll
ayala
ayala

Reputation: 178

AOS - how to not hiding the element again on scroll up

I'm using aos library in my angular project, and I attach it to the element

<div data-aos="zoom-in"></div

it works fine, but my problem is, that when I scroll up - the element disappears, and scrolling down - appears again.

I assume this is the default behavior of AOS, so my question is - how can I change it? so when scrolling wherever after the element appears- it would stay there staticly and won't disappear.

Thanks you for every answer.

Upvotes: 2

Views: 647

Answers (2)

kiranvj
kiranvj

Reputation: 34107

You can do it during init of AOS. Below should work for your requirement. data-aos-once="true" should also work as mentioned in the other solution. The approach depends on whether you need it on all animations or only of few elements.

AOS.init({once: true});

Upvotes: 1

Jignesh Panchal
Jignesh Panchal

Reputation: 1376

You can use the property data-aos-once="true" as below to avoid the element disappearing when scrolling up.

<div data-aos="zoom-in" data-aos-once="true"></div>

Note: By using data-aos-once="true", An AOS effect will only work once.

Upvotes: 1

Related Questions