FlowMotion

Animation Demos

Discover the power of FlowMotion with these interactive animation examples

Smooth Scrolling

Text Reveal

F l o w M o t i o n

Morph Shapes

Parallax Effect

Stagger Animation

3D Transform

Key Features

Why choose FlowMotion for your next project

⚡

Performance Optimized

Built with performance in mind, FlowMotion uses GSAP's industry-leading animation engine to deliver smooth animations even on complex websites.

📱

Fully Responsive

All animations adapt perfectly to any screen size, ensuring a consistent experience across desktop, tablet, and mobile devices.

🔌

Easy Integration

Simple API that works with any project. Just include the library and start animating with minimal configuration required.

📜

ScrollTrigger Ready

Powerful scroll-based animations that trigger exactly when you want them to, with intuitive controls for timing and effects.

🎨

Customizable

Extensive options for customizing every aspect of your animations, from timing functions to complex motion paths.

🔄

Modern Browser Support

Works flawlessly in all modern browsers with graceful fallbacks for older environments.

Implementation

Get started with FlowMotion in just a few lines of code

// Initialize FlowMotion with simple configuration import { FlowMotion } from 'flowmotion'; const animation = new FlowMotion({ // Target elements to animate targets: '.fade-in', // Animation properties props: { opacity: 1, y: 0 }, // ScrollTrigger configuration scrollTrigger: { trigger: '.section', start: 'top 80%', end: 'bottom 20%', scrub: 0.5 }, // Animation settings duration: 1, ease: 'power2.out', stagger: 0.1 }); // Create a sequence of animations FlowMotion.timeline() .add({ targets: '.hero h1', opacity: 1, y: 0, duration: 1 }) .add({ targets: '.hero p', opacity: 1, y: 0, duration: 0.8 }, '-=0.5') .add({ targets: '.hero .button', opacity: 1, y: 0, duration: 0.6 }, '-=0.3');