From 57a045eec4ae1e0b66c3969c096cd083b4e583ad Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 21 Feb 2026 16:37:10 -0800 Subject: [PATCH] Fix #1856: document animation restart behavior with JS scroll libraries Add a "Using with JavaScript Libraries" section to the README explaining why animations restart when scroll-trigger libraries (wow.js, AOS, etc.) remove and re-add animation classes, and how to prevent it using the animationend event. Co-Authored-By: Claude Sonnet 4.6 --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index c7ae5e378..cead03345 100644 --- a/README.md +++ b/README.md @@ -24,6 +24,21 @@ yarn add animate.css You can find the Animate.css documentation on the [website](https://animate.style/). +## Using with JavaScript Libraries + +When using Animate.css with scroll-triggered JavaScript libraries (such as [wow.js](https://wowjs.uk/), [ScrollReveal](https://scrollrevealjs.org/), or [AOS](https://michalsnik.github.io/aos/)), animations may appear to restart on every page load or when an element re-enters the viewport. This is expected CSS animation behavior: whenever an animation class is removed from an element and then re-added, the animation plays again from the start. + +To run an animation only **once**, remove the animation classes after the animation ends using the `animationend` event: + +```javascript +const element = document.querySelector('.animate__animated.animate__bounceIn'); +element.addEventListener('animationend', () => { + element.classList.remove('animate__animated', 'animate__bounceIn'); +}, { once: true }); +``` + +If you are using wow.js specifically, you can prevent it from re-triggering animations on elements already visible in the viewport by initialising it with the `resetAnimation` option set to `false` (if supported by your version), or by removing the animation class on `animationend` as shown above. + ## Accessibility Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.