Components

In View

Component that triggers animations when it comes into view.

In View

The InView component triggers animations when it comes into view. It uses the Intersection Observer API to detect when an element enters or leaves the viewport, allowing you to create engaging scroll-based animations.

Usage

Custom Animation

This element uses custom variants for animation.

<template>
  <MInView>
    <div class="p-6 bg-primary rounded-lg">
      <h3 class="text-xl font-bold mb-2">In View Component</h3>
      <p class="text-gray-600 dark:text-gray-400">This content is animated when it comes into view.</p>
    </div>
  </MInView>
</template>

Props

threshold

number

Visibility threshold (0-1).

once

boolean

Trigger only once.

rootMargin

string

Root margin for intersection.

delay

number

Delay before triggering.

Events

inView

(inView: boolean) => void

Emitted when visibility changes.

Slots

default

{ inView: boolean }

Default slot with visibility state.

Examples

Basic In View

Scroll to Reveal

Content that fades in beautifully when it comes into view

InView Animation

This content smoothly fades in when it enters your viewport, creating a polished scrolling experience that draws attention to important elements.

Enhanced Visibility

Perfect for showcasing features, testimonials, or important information that you want to highlight as users scroll through your content.

Performance Focused

Optimized for smooth performance with minimal impact on your page load times, ensuring a seamless user experience across all devices.

<template>
  <MInView>
    <div class="p-4 bg-secondary rounded">
      <p>This content fades in when it comes into view.</p>
    </div>
  </MInView>
</template>

With Custom Threshold

This content triggers when 50% is in view.

<template>
  <MInView :threshold="0.5">
    <div class="p-4 bg-tertiary rounded">
      <p>This content triggers when 50% is in view.</p>
    </div>
  </MInView>
</template>

With Repeat Animation

This content animates every time it comes into view.

<template>
  <MInView :once="false">
    <div class="p-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded">
      <p>This content animates every time it comes into view.</p>
    </div>
  </MInView>
</template>

With Custom Animation

This content has a custom animation.

<template>
  <MInView 
    :transition="{ duration: 0.8, ease: 'easeInOut' }"
    :variants="{
      initial: { opacity: 0, y: 20 },
      animate: { opacity: 1, y: 0 }
    }"
  >
    <div class="p-4 bg-primary rounded">
      <p>This content has a custom animation.</p>
    </div>
  </MInView>
</template>

Image Comparison

Interactive image comparison component with slider controls for before/after visualization.

Lamp Container

Animated lamp effect container with customizable gradient colors and lighting effects.