Animation System Preview

A comprehensive library of motion patterns, easing functions, and micro-interactions for the Schematiq design system.

Easing Curves

Hover over each card to see the easing function in action. The right curve makes all the difference.

Linear
linear
Ease Out Expo
cubic-bezier(0.16, 1, 0.3, 1)
Ease Out Back
cubic-bezier(0.34, 1.56, 0.64, 1)
Spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)

Organic Motion

Fluid shape transformations that bring interfaces to life with organic, natural movement.

Loaders & Spinners

Keep users engaged while content loads with these delightful loading animations.

Spinner
Pulse
Dots
Bars
Ring
Orbit
DNA
Cube
Ripple
Rainbow

Text Animations

Dynamic text effects that add personality and draw attention to key messaging.

Typewriter
Hello, Schematiq.
Glitch
GLITCH
Wave
S C H E M A T I Q
Gradient Flow
MOTION

Hover Effects

Micro-interactions that provide feedback and delight users on every interaction.

Scale
Lift
Glow
Shine
Fill
Rotate
Border
Flip

Button Animations

Call-to-action buttons that demand attention and encourage interaction.

Animated Icons

Icons that move with purpose, adding life to your interface.

🔔

Particles

Ambient motion creates atmosphere and depth

Code Preview

Watch your code come to life with sequential reveal animations.

const animation = {
duration: 0.6,
easing: 'ease-out-expo',
delay: 0.1,
stagger: 0.05,
};
// Apply motion with intention

Timeline Animation

Initial State

Elements begin hidden or in their starting position

Trigger Event

Scroll, click, or time-based activation

Animation

Smooth transition with appropriate easing

Final State

Elements settle into their destination