What are some examples of using ScrollTrigger in Vue 3?

What are some examples of using ScrollTrigger in Vue 3?

ScrollTrigger is a powerful library for creating scroll-based animations. In Vue 3, you can use it to trigger animations based on the scroll position of the page. For example, you can animate elements as they enter or leave the viewport.

Can you show me a simple code example?

Sure! Here's a basic example:

<template>
  <div ref="trigger" class="box">Scroll to animate me!</div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default {
  setup() {
    const trigger = ref(null);

    onMounted(() => {
      gsap.from(trigger.value, {
        scrollTrigger: {
          trigger: trigger.value,
          start: "top 80%",
          end: "top 30%",
          toggleActions: "play none none reverse"
        },
        opacity: 0,
        y: 50,
        duration: 1
      });
    });

    return { trigger };
  }
};

This code animates a box when it scrolls into view.

What other features does ScrollTrigger offer?

ScrollTrigger offers a variety of features, including pinning elements, creating scroll-based timelines, and triggering animations based on scroll position. You can also customize the start and end points of animations, and use callbacks for more complex interactions.