Bring your website to life with motion, instantly using the Interaction Library. Simply pick a premade interaction and apply it to text, images, buttons, cards, or entire sections – production-ready, right out of the box.

Add a Premade Interaction

1. Select the element you want to animate.

2. Open the Interaction tab in the Right Panel.

3. Select an interaction directly, or click Browse to see all available types.

Interaction Types

The library includes the following interaction types:

• Self Reveal – Reveal an element as it comes into view.

• Children Reveal – Reveal an element’s children together or in sequence.

• Text Animation – Animate text elements at the element, word, or character level.

• Parallax Scroll – Move an element at a different speed than the page as your visitor scrolls.

• Item Stacking – Animate children into or out of a stack.

• Ticker – Scroll content continuously across the screen.

• Cursor Parallax – Shift an element based on cursor position.

• Follow Cursor – Make an element track the cursor, or replace the cursor entirely.

Self Reveal

Self Reveal animates an element as it appears on the page – ideal for hero sections, headings, or anything that should announce itself.

Choose Preset

By default, the Self Reveal interaction is set to Fade In, but you can change this from the Preset dropdown:

1. Fade In
2. Move Up
3. Move Right
4. Move Left
5. Soft Bloom
6. Blur In
7. Popcorn
8. Card Spread
9. Light Speed
10. Zoom-in

Each preset comes with its own default effects and timing, which you can further customize below.

Enable Auto Reset

Enable Auto Reset to have the element return to its starting state each time it leaves the viewport, so the animation replays on every scroll into view. Leave it off to play the animation once.

Apply Effects

The Effects section shows which properties animate and their values. This changes depending on the Preset you’ve chosen. 

Click the plus (+) icon to add more effects and choose from:

• Move
• Skew
• Scale
• Rotate
• Opacity
• Blur

Each effect you add gets its own field where you can set its value. 

Click the minus (–) icon next to an effect to remove it.

Learn more about Transform and Filter effects.

Configure Timing

In the Timing section, set:

• Delay – How long to wait before the animation starts, in milliseconds.

• Duration – How long the animation takes to complete, in milliseconds.

• Curve – The easing style, chosen from Linear, Ease, Ease In, Ease Out, or Ease In Out. 

Timing Editor – Click the graph icon next to the Curve dropdown to open the Timing Editor for finer control.

Children Reveal

Children Reveal animates the child elements inside a container instead of revealing the container as a whole.

Choose Preset

By default, the Children Reveal interaction is set to Fade In, but you can change this from the Preset dropdown:

1. Fade In
2. Move Up
3. Move Right
4. Move Left
5. Soft Bloom
6. Blur In
7. Popcorn
8. Card Spread
9. Light Speed
10. Zoom-in

Each preset comes with its own default effects and timing, which you can further customize below.

Enable Auto Reset

Enable Auto Reset to have the element return to its starting state each time it leaves the viewport, so the animation replays on every scroll into view. Leave it off to play the animation once.

Apply Effects

The Effects section shows which properties animate and their values. This changes depending on the Preset you’ve chosen. 

Click the plus (+) icon to add more effects and choose from:

• Move
• Skew
• Scale
• Rotate
• Opacity
• Blur

Each effect you add gets its own field where you can set its value. 

Click the minus (–) icon next to an effect to remove it.

Learn more about Transform and Filter effects.

Configure Timing

In the Timing section, set:

• Delay – How long to wait before the animation starts, in milliseconds.

• Duration – How long the animation takes to complete, in milliseconds.

• Wait – How long to wait between each child’s animation, in milliseconds, creating the staggered sequence.

• Wait Curve – The easing style applied to the stagger itself.

• Curve – The easing style, chosen from Linear, Ease, Ease In, Ease Out, or Ease In Out.

Timing Editor – Click the graph icon next to the Curve dropdown to open the Timing Editor for finer control.

Set Targets

By default, Children Reveal applies to All Children of the selected element. To animate only specific children, switch Target to Custom:

1. Click Custom.

2. Select the child elements you want to include directly from the canvas. Each selection adds a counter, e.g., Add selection (1). To select multiple elements at once, hold Shift and click the elements.

3. Once selected, click the counter button to add them as targets. 

Repeat to add more children, or click the minus (–) icon next to a target to remove it from the list.

Text Animation

Text Animation instantly animates any text element. You can set it to animate character by character, word by word, or as a whole element, and customize the effects and timing to match your design.

Learn more about Text Animation.

Parallax Scroll

Parallax Scroll moves an element’s children at a different speed than the rest of the page as your visitor scrolls, creating a sense of depth.

Configure Parallax Settings

• Distance – How far the elements shift relative to the page scroll, as a percentage.

• Smoothness – How smoothly the parallax motion plays out, as a percentage.

• Offset – Shifts the starting position of the effect, as a percentage.

Set Targets

By default, Parallax Scroll applies to All Children of the selected element. To animate only specific children, switch Target to Custom:

1. Click Custom.

2. Select the child elements you want to include directly from the canvas. Each selection adds a counter, e.g., Add selection (1). To select multiple elements at once, hold Shift and click the elements.

3. Once selected, click the counter button to add them as targets. 

Repeat to add more children, or click the minus (–) icon next to a target to remove it from the list.

Item Stacking

Item Stacking animates a container’s children into a stack, layering them on top of one another, or animates them out of a stack, unfolding into their own space.

Choose Preset

By default, Item Stacking is set to Card Deck, but you can change this from the Preset dropdown:

• Card Deck
• Push-Back Stack
• Perspective View
• Pop In-out
• Corner Deck

Or select Custom to build your own. Each preset has its own default effects and settings, which you can further customize below.

Set Stack Direction

Use the Stack toggle to set how the children respond to scroll direction:

• In – Children stack together as your visitor scrolls down, and unstack as they scroll back up.

• Out – Children unstack as your visitor scrolls down, and stack together as they scroll back up.

Adjust Stack Settings

The available settings depend on the direction you choose.

When Stack is set to In:

• Smoothness – How smoothly the stacking motion plays out, as a percentage.

• Top Offset – How far the stack sits from the top, in vh.

• Item Offset – How much each item shifts from the one before it, as a percentage.

• Gap – The spacing between stacked items, in px.

When Stack is set to Out:

• Smoothness – How smoothly the unstacking motion plays out, as a percentage.

• Bottom Offset – How far the stack sits from the bottom, in vh.

• Item Offset – How much each item shifts from the one before it, as a percentage.

• Gap – The spacing between stacked items, in px.

Edit In Effects and Out Effects

Item Stacking animates in three phases: 

• In Effects play first, bringing each child item from its starting state to its normal state on the canvas.

• This normal state is the midpoint of the animation. 

• Once In Effects finish, Out Effects take over, animating it onward from that normal state.

Click the plus (+) icon next to either In Effects or Out Effects to add an effect:

• Move
• Skew
• Scale
• Rotate
• Opacity
• Blur

Each effect includes:

• Progress – The start and end percentage of the animation during which the effect plays.

• Curve – The easing style, chosen from Linear, Ease, Ease In, Ease Out, or Ease In Out. Click the graph icon next to it to open the Timing Editor for finer control.

• The effect’s value field.

• Transform options – Open additional settings for the effect.

Progress ranges must follow this order:

• The In Effects progress end value must be greater than or equal to its start value.

• The Out Effects progress start value must be greater than or equal to the In Effects progress end value.

• The Out Effects progress end value must be greater than or equal to its own start value.

Finally, to remove an effect, click the minus (–) icon next to it.

Learn more about Transform and Filter effects.

Ticker

Ticker scrolls content continuously across the screen, like a marquee – great for logos, testimonials, announcements, or anything that benefits from constant motion.

Adjust Ticker Settings

• Draggable – Select Yes to let visitors drag the ticker, or No to disable dragging.

• Direction – Set the scroll direction, left or right.

• Speed – How fast the ticker scrolls, as a percentage.

• Hover – Choose Yes to change the ticker’s speed on hover, or No to keep it constant.

• Speed – The scroll speed while hovering, as a percentage. Only applies when Hover is set to Yes.

Cursor Parallax

Cursor Parallax shifts an element based on cursor position, creating a light, responsive depth effect as the visitor moves their mouse.

Adjust Cursor Parallax Settings

• Direction – Choose horizontal, vertical, or both for the axis the element moves along.

• Area – Choose Viewport or Parent to set the boundary the cursor position is measured against.

• Distance – How far the element shifts, as a percentage.

• Smoothness – How smoothly the element follows the cursor, as a percentage.

Set Targets

By default, Follow Cursor applies to All Children of the selected element. To animate only specific children, switch Target to Custom:

1. Click Custom.

2. Select the child elements you want to include directly from the canvas. Each selection adds a counter, e.g., Add selection (1). To select multiple elements at once, hold Shift and click the elements.

3. Once selected, click the counter button to add them as targets.

Follow Cursor

Follow Cursor lets an element track the visitor’s mouse or replaces the cursor entirely with a custom element.

Adjust Follow Cursor Settings

• Area – Choose Viewport or Parent to set the boundary the element tracks within.

• Cursor – Choose Show to keep the default cursor visible, or Hide to replace it entirely with the element.

• Position – Set the element’s horizontal and vertical alignment relative to the cursor.

• Smoothness – How smoothly the element follows the cursor, as a percentage.