Fluxo UIFluxo UIv0.1.1

AnimateOnView

A wrapper component that triggers CSS animations when elements scroll into the viewport using IntersectionObserver.

Basic Usage

Fade In Up

Default animation triggers once when the element enters the viewport.

Fade In Up

Scroll down and back to see this animate

Fade In

With 200ms delay

import { AnimateOnView } from 'fluxo-ui';

<AnimateOnView animation="fadeInUp">
  <div>This content animates when scrolled into view</div>
</AnimateOnView>

All Animation Types

16 built-in animation types. Each card below uses once=false to re-animate when scrolled back into view.

All Animation Types

Scroll down to see each animation type in action. Each card animates independently.

Fade In

fadeIn

Fade In Up

fadeInUp

Fade In Down

fadeInDown

Fade In Left

fadeInLeft

Fade In Right

fadeInRight

Zoom In

zoomIn

Zoom Out

zoomOut

Slide Up

slideUp

Slide Down

slideDown

Slide Left

slideLeft

Slide Right

slideRight

Flip X

flipX

Flip Y

flipY

Rotate In

rotateIn

Bounce In

bounceIn

Scale Up

scaleUp

Staggered Animations

Use stagger and staggerIndex to create cascading animations across lists.

Staggered Animation

Use stagger and staggerIndex to cascade animations across a list of elements.

📊

Dashboard

Overview of all metrics

📈

Analytics

Deep dive into data

📋

Reports

Generated insights

⚙️

Settings

Configure preferences

👥

Users

Manage team members

💳

Billing

Plans and payments

import { AnimateOnView } from 'fluxo-ui';

{items.map((item, index) => (
  <AnimateOnView
    key={item.id}
    animation="fadeInUp"
    stagger={100}
    staggerIndex={index}
  >
    <Card {...item} />
  </AnimateOnView>
))}

Configuration

Configuration

Customize animation type, duration, and behavior.

bounceIn

600ms | every time

<AnimateOnView
  animation="bounceIn"
  duration={1000}
  delay={200}
  easing="ease-out"
  once={false}
  threshold={0.3}
>
  <div>Configurable animation</div>
</AnimateOnView>

Scroll Demo

Scroll-triggered Showcase

Scroll through this section to see alternating animations. Each section uses once={false} to re-animate on scroll.

1

Step 1: Design

Create beautiful interfaces with our component library. Every component is crafted with attention to detail and accessibility.

2

Step 2: Develop

Build with TypeScript-first components that provide full type safety and IntelliSense support out of the box.

3

Step 3: Test

Ensure quality with comprehensive accessibility support, keyboard navigation, and theme compatibility across all components.

4

Step 4: Deploy

Ship with confidence using tree-shakeable imports, CSS code splitting, and optimized bundle sizes.

5

Step 5: Scale

Grow your application with our state management solution, 12 color themes, and mobile-responsive design system.

6

Step 6: Celebrate!

You have built something amazing. Time to share it with the world and keep iterating.

Import

import { AnimateOnView } from 'fluxo-ui';
import type { AnimateOnViewProps, AnimationType } from 'fluxo-ui';

Props

animation
'fadeIn' | 'fadeInUp' | 'fadeInDown' | 'fadeInLeft' | 'fadeInRight' | 'zoomIn' | 'zoomOut' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'flipX' | 'flipY' | 'rotateIn' | 'bounceIn' | 'scaleUp'"'fadeInUp'"

The animation type to apply.

duration
number"600"

Animation duration in milliseconds.

delay
number"0"

Delay before animation starts in milliseconds.

easing
'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'"'ease-out'"

CSS animation timing function.

once
boolean"true"

If true, animate only the first time the element enters the viewport.

threshold
number"0.1"

IntersectionObserver threshold (0-1). How much of the element must be visible.

rootMargin
string"'0px'"

IntersectionObserver root margin.

as
React.ElementType"'div'"

The HTML element or component to render as.

disabled
boolean"false"

Skip animation and show content immediately.

onVisible
() => void

Called when the element becomes visible.

onHidden
() => void

Called when the element leaves the viewport (if once=false).

stagger
number"0"

Delay increment per item in milliseconds for staggered lists.

staggerIndex
number"0"

Index of this item in a staggered sequence.

childrenreq
ReactNode

Content to animate.

className
string

Additional CSS class.

Features

16 Animations

Fade, slide, zoom, flip, rotate, bounce, scale — in every direction.

Viewport Detection

Uses IntersectionObserver for efficient, performant scroll detection.

Once or Repeat

Animate once on first view, or re-animate every time the element enters the viewport.

Stagger Support

Cascade animations across lists with configurable stagger delay.

Configurable

Control duration, delay, easing, and threshold for each animation.

Reduced Motion

Automatically respects prefers-reduced-motion for accessibility.