I want to run aos fade up animation only once

Question

When you enter the page for the first time, it should be fade up, but it's fade down. This problem seems to be caused by not only the fade-up effect when scrolling down the page, but also the fade-down effect when scrolling up the page. I only set the fade-up effect to the code. How can I make it only fade up? The web page and code are below.

https://www.dorothycard.com/v/48dc3e5f

<div class="mx-4" data-aos="fade-up" data-aos-duration="1500" data-aos-once=“true”>

Answer 1

When I inspect your page, all the animated elements have the following attribute:

data-aos-once=""true""

when that attribute should be:

data-aos-once="true"

The first sets the attribute to the string "true" which is quite different from the boolean true (which is what is expected).

I do not know how you set this attribute in your source, but you will want to look there for a fix to your issue.

Note that if you want ALL your animations in the page to only run once, you could also pass that option in the AOS.init() function call:

AOS.init({
 // ... your other initialisation options here ...
 once: true,
});

and you could then remove all individual data-aos-once attributes.