Skip to content

aa-again

aa-again overrides the global init({ again }) default on a single element. By default every scroll-triggered animation replays each time its trigger re-enters the viewport. Set aa-again="false" to make one element play once and stay finished — useful for animated content inside a slider/carousel that shouldn't re-fire as the section scrolls past, or any entrance you only want to see the first time.

Only affects scroll-triggered animations (appear / text / reveal); load, event, and scrub triggers ignore it. Supports the | and -sm/-md/-lg/-xl responsive forms like other value-bearing attributes.

ValueBehaviour
(omitted)Uses the global init({ again }) default (true unless you changed it).
falsePlays once on enter, then stays finished — never resets/replays when it re-enters the view.
trueForces replay-on-re-enter, even when init({ again: false }) is set globally.
<!-- plays once and stays put -->
<div aa-animate="fade-up" aa-again="false"></div>
<!-- replays every time, even under a global init({ again: false }) -->
<div aa-animate="fade-up" aa-again="true"></div>

Scroll the two cards into view, then scroll back up past them and down again. The default card resets and replays each time; the aa-again="false" card animates once and then stays put.

Defaultreplays on every re-enter
aa-again="false"plays once, stays finished