Interactions

Motion that responds to every scroll.

Whether you're new to interactions or a pro, it's easy to trigger animations on scroll, control their origin, and add movement or tilt, all visually and without code.

Get Started

Scroll interaction

Six effects to transform every scroll.

Each effect responds to your scrolling, creating smooth, interactive motion as you move through the page.

01

Move

Add scroll-based movement to static elements for depth and motion.

Move along X, Y, and Z axes independently.

Set custom transform origin (horizontal and vertical).

Enable or disable separately for tablet and mobile.

02

Scale

Change an element’s size as visitors scroll for fluid motion and visual depth.

Grow or shrink elements from any custom point.

Highlight key elements with scroll-based scaling.

Create a zoom effect without changing the image.

Emotion Over Perfection

03

Rotate

Add scroll-driven rotation for more immersive, dynamic layouts.

Rotate elements on the X, Y, or Z axis.

Control rotation throughout the scroll animation.

Add dynamic motion to static elements.

04

Skew

Slant elements as visitors scroll to create motion and angled perspective.

Skew elements without rotating them.

Create the illusion of speed and direction.

Make flat layouts feel more dynamic.

Inspired by the harmony of the universe, celebrating the patterns and repetitions at its core.

05

Blur

Add depth and focus by smoothly blurring elements as users scroll.

Soften elements in or out of focus with a single blur value.

Layer it with Move or Opacity for a depth-of-field effect.

Anchor the blur to a custom transform origin.

06

Opacity

Control element visibility as users scroll or interact. Set opacity from fully visible to transparent for smooth reveals.

Fade elements in or out with one value.

Trigger fades at any point in the timeline.

Control where the fade starts.

Human

07

3D tilt

Add a cursor-driven 3D tilt to interactions. Choose the direction, speed, and maximum tilt angle.

Available across all 6 interaction effects.

Choose a tilt direction.

Control tilt speed.

Control every detail of your interactions.

Fine-tune how elements move, rotate, and respond. Set the transform point, add depth, or adjust the default position.

Transform origin

Choose the point an element transforms around with custom X and Y values.

Perspective

Add Z-axis depth to make rotations and tilts feel more three-dimensional.

Static transform

Set an element’s default position with offset, rotation, scale, or skew.