Add scroll-triggered animations
Senior SEO-specialist
Scroll-triggered animations make your website more dynamic without placing a heavy burden on load times. They attract attention, improve the experience and make important elements stand out at the right time. In this article, I explain how to implement this technically well: lightweight, responsive and SEO-proof.
1. When scroll animations make sense
Use scroll animations to subtly highlight specific elements, such as:
- USPs or statistics
- CTA Blocks
- Testimonials
- Graphs or process steps
- Portfolio items
Note: use animation functionally. Not overkill – but support your message.
2. What technique do you choose?
There are several ways to build scroll animations. The choice depends on your project size and tech stack.
Popular options:
- AOS.js – Lightweight, easy to integrate
- ScrollTrigger (GSAP) – More control, but heavier
- Intersection Observer API – Native JavaScript, no external libraries required
For SEO-friendly sites, I usually prefer AOS.js or Intersection Observer.
3. Scroll animations with AOS.js (quick setup)
AOS (Animate On Scroll) is quick to add and works well without JavaScript knowledge.
Step 1: Add AOS
html
<!-- Head -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init();
</script>
Step 2: Add data-aos to your HTML elements
html
<div data-aos="fade-up">Inhoud die infade bij scrollen</div>
<div data-aos="zoom-in" data-aos-delay="200">Met vertraging</div>
You can vary with: fade, slide, zoom, flip, duration, delay, etc.
Aan de slag met SEO? Neem gerust contact op.
4. Scroll animations with Intersection Observer (native JS).
For those who prefer to work without external scripts, the Intersection Observer API is a lightweight and flexible solution.
Example:
html
<div class="fade-in">Tekst of afbeelding</div>
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
Advantage: no dependencies, full control over behavior and styling.
5. Best practices (for SEO, UX and performance).
- Use animations only if they are functional
- Add prefers-reduced-motion support for accessibility
- Load JS and CSS async/defer whenever possible
- Avoid animating large images or heavy DOM blocks
- Test on mobile and low CPU (Lighthouse / DevTools)
In conclusion
Scroll-triggered animations make your site visually stronger – if properly deployed. Use them to guide attention, support interaction and give structure to content. With tools like AOS.js or native JavaScript, you can implement it quickly and efficiently.
