Interactions & animations Lab

Usage

const element = ref();

const { progress, isInView } = useScrollProgress({
  target: element,
  offset: [0, 0]
});

Options

• target - Element to track
• offset - [start, end] offsets in pixels
• onProgress - Callback function

Implementation

const { progress } = useScrollProgress({
  target: container,
  offset: [-200, 200]
});

// Different speeds for each layer
const offset1 = computed(() =>
  (progress.value - 0.5) * -100
);
const offset2 = computed(() =>
  (progress.value - 0.5) * -200
);
const offset3 = computed(() =>
  (progress.value - 0.5) * -300
);

Tips

• Use negative multipliers for upward movement
• Larger values = faster movement
• Center at 0.5 (50% progress) for balanced effect

Usage

const element = ref();
const { isInView } = useScrollProgress({
  target: element
});

// CSS based on state
<section :data-in-view="isInView">
  ...
</section>

CSS Example

.section {
  background: #f5f5f5;
  transition: background 0.6s ease;
}

.section[data-in-view="true"] {
  background: #fb6464;
}

Implementation

const boxes = ref([]);

onMounted(() => {
  // Set initial state
  gsap.set(boxes.value, {
    opacity: 0,
    y: 100,
    rotation: 90
  });

  // Watch scroll
  const { watch } = useScroll();
  watch(() => {
    boxes.value.forEach(box => {
      const rect = box.getBoundingClientRect();
      const progress = calculateProgress(rect);

      gsap.to(box, {
        opacity: progress,
        y: (1 - progress) * 100,
        rotation: (1 - progress) * 90
      });
    });
  });
});

Usage

const element = ref();

useTextReveal(element, {
  fromColor: 'rgba(0, 0, 0, 0.15)',
  toColor: 'rgba(0, 0, 0, 1)'
});

How it Works

• Splits text into individual characters
• Animates color based on scroll progress
• Starts when element enters viewport
• Completes when element reaches center

Basic Usage

const element = ref();

const { startAnimation, reset, splitText } = useCodeReveal(element, {
  duration: 0.3,
  delay: 0,
  revealPercentage: 1
});

// Split text first
onMounted(async () => {
  await splitText();
});

// Trigger animation
startAnimation();

Options

• duration - Animation duration in seconds (default: 1.2)
• delay - Delay before animation starts in seconds (default: 0)
• randomChars - Characters used during reveal (default: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&*")
• revealPercentage - Percentage of chars to reveal per frame (default: 0.15)

How it Works

• Uses GSAP SplitText to split text into characters
• Randomly reveals characters using requestAnimationFrame
• Frame-based timing ensures predictable duration
• Instant opacity change (no CSS transition)
• Each character appears exactly once

Scroll-Triggered Example

// Split text on mount to hide it
onMounted(async () => {
  await splitText();
});

// Watch for trigger condition
watch(
  () => uiStore.pixelTransitionComplete,
  async (isComplete) => {
    if (isComplete) {
      startAnimation();
    }
  }
);

Manual Control

const element = ref();
const { animate, isAnimated } = useSplitText(element, {
  type: 'words', // or 'chars', 'lines'
  stagger: 0.08,
  duration: 0.6
});

// Toggle animation
animate(!isAnimated.value);

Auto on Scroll

useSplitText(element, {
  type: 'words',
  animateOnScroll: true,
  scrollOffset: [150, -100]
});

Usage

// Basic
<a v-glitch>Hover Me</a>

// Custom color
<a v-glitch="{ color: '#FFCC00' }">
  Orange Glitch
</a>

// Custom speed (ms)
<a v-glitch="{ interval: 100 }">
  Slow
</a>

Features

• Random special characters
• Non-sequential reveal order
• Fixed width (no layout shift)
• Single execution per hover

Basic Usage

<div v-scroll-reveal>
  Fade in on scroll
</div>

With Options

<div v-scroll-reveal="{
  delay: 0.2,
  duration: 1
}">
  Delayed reveal
</div>

<!-- Stagger children -->
<div v-scroll-reveal="{
  staggerChildren: true,
  stagger: 0.15
}">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

Usage

<PixelTrail
  targetSelector=".your-image"
  containerSelector=".your-container"
  captureMode="all"
/>

Props

• targetSelector - CSS selector for images to capture (default: ".block-project-bg__image img")
• containerSelector - Container to constrain pixel trail (optional)
• captureMode - "all" captures all visible images, "centered" captures only the centered image (default: "all")

Features

• WebGL-based rendering for optimal performance
• Captures colors from underlying images
• Random scattered pixel appearance
• Individual pixel lifetimes for organic disappearance
• Automatic color lightening for visibility
• No transparency - solid pixel blocks

Usage

<PixelTransition
  ref="pixelTransition"
  @transitionComplete="handleComplete"
/>

// Trigger the transition
const pixelTransition = ref();
pixelTransition.value?.startTransition();

Events

• @transitionComplete - Emitted when animation finishes

How it Works

• Divides screen into pixel grid
• Each pixel has randomized delay for staggered reveal
• Canvas-based rendering for performance
• Automatically triggers on page load
• Coordinates with UI store for animation timing

Integration Example

// In app.vue
const pixelTransition = ref();
const uiStore = useUIStore();

const handlePixelTransitionComplete = () => {
  uiStore.setPixelTransitionComplete(true);
};

// Trigger on loader hide
const handleLoaderHide = () => {
  nextTick(() => {
    pixelTransition.value?.startTransition();
  });
};

Usage

<RollingNumber
  :from="0"
  :to="42"
  :digits="2"
  :duration="2"
  :stagger="0.1"
  ease="power2.inOut"
  @complete="onComplete"
/>

Props

• from - Starting number (default: 0)
• to - Target number (required)
• digits - Number of digits to display (default: 2)
• duration - Animation duration in seconds (default: 2)
• stagger - Delay between each digit (default: 0.1)
• ease - GSAP easing function (default: "power2.inOut")

Methods

const ref = ref();
ref.value.animateTo(99);
ref.value.reset(0);

Usage

const uiStore = useUIStore();

// Show button
const show = () => {
  uiStore.showMouseFollower(true, true);
};

// Hide button
const hide = () => {
  uiStore.hideMouseFollower();
};

In Template

<div
  @mouseenter="show"
  @mouseleave="hide"
>
  Hover to show button
</div>