###### Animation Settings

Play Once
Reverse on Exit
Toggle to see different behaviors

# Scroll Animation Showcase

Custom animations with replay controls

Zero Dependencies Full Control Lightweight
↑

## Fade Up Animation

This section smoothly fades in from below as you scroll.

Perfect for introducing content in a subtle, elegant way. The element starts invisible and slightly below its final position, then transitions smoothly into view.

Try it: Scroll past this section and back up to see it animate again (if "Play Once" is disabled).

←

### Fade From Left

This card slides in from the left side, creating a dynamic entrance effect.

Repeatable
→

### Fade From Right

This card slides in from the right side, balancing the visual flow.

Repeatable
⊕

## Scale Up Animation

This section grows from a smaller size to full scale.

Creates a zoom-in effect that draws attention to the content. Great for highlighting important information or featured items.

Note: Enable "Reverse on Exit" to see the animation reverse when scrolling past.

↻

## Rotate In Animation

This section rotates and scales into view.

Combines rotation with scaling for a playful, dynamic entrance. Adds personality to your page sections.

⟲

## Flip In Animation

This section flips in like a card turning over.

Creates a 3D flip effect that's both eye-catching and modern. Perfect for revealing content in an unexpected way.

## Staggered Animation

#### Feature One

Each card appears with a slight delay, creating a cascading effect.

#### Feature Two

The staggered timing makes the animation feel more natural and polished.

#### Feature Three

Great for displaying multiple items like features or team members.

#### Feature Four

Creates visual rhythm and guides the user's eye through the content.

## Full Control Over Animations!

Choose between play-once or repeatable animations.

##### How to Use:

Play Once (default): Animations trigger only the first time elements enter viewport - perfect for production sites.

Repeatable: Animations replay every time you scroll to them - great for demos and showcases.

Reverse on Exit: Animations reverse when leaving viewport - creates a mirror effect.

Use the controls in the top-right corner to experiment with different behaviors!