How can I implement scroll-triggered animations in Vue?

How can I implement scroll-triggered animations in Vue?

You can use the Intersection Observer API along with Vue's lifecycle hooks to trigger animations when elements come into view.

Can you provide a code example for that?

Sure! Here's a simple example:

<template>
  <div ref="scrollElement" class="fade-in">
    Scroll to see me fade in!
  </div>
</template>

<script>
export default {
  mounted() {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    });
    observer.observe(this.$refs.scrollElement);
  }
};
</script>

<style>
.fade-in {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-in.visible {
  opacity: 1;
}
</style>

What if I want to trigger animations on multiple elements?

You can create a loop to observe multiple elements by using document.querySelectorAll to select them and then observing each one in the same way.