The Cursor Trail animation creates a trailing visual effect on the element as the uThe Cursor Trail animation creates a trailing visual effect on the element following the cursor as the user navigates around the page.

To access it, you need to set the trigger to Scroll Into View – this unlocks the option in the Animation Library.

Add Cursor Trail Animation

1. Select the element you want to animate.

2. Go to the Interaction tab in the Right Panel.

3. Add a Trigger and set its type to Scroll into view. 

4. Click the plus icon next to Scrolled Into and select Library → Cursor Trail.

Tip: For a seamless result, make sure the element is placed at the top of its wrapper section (in case of parent) or page (in case of viewport) and that its position is set to Absolute with Offset values set to 0,0.

Configure Cursor Trail Animation

Once added, a settings pop-up will appear with the following options:

Action

Displays the selected animation type. Keep this set to Cursor Trail.

Container

Defines the boundary within which the cursor trail effect is visible. Click the Container dropdown and select either:

• Parent – Limits the effect to within the element’s parent wrapper.

• Viewport – Extends the effect across the entire visible browser window.

Smoothing

Controls how smoothly the cursor trail effect transitions. Enter a value between 0 and 100 (as a percentage). A value of 1% is the default.

Remove a Cursor Trail Animation

In the Interaction panel, locate the Cursor Trai entry. Click the minus (–) icon on the right side of the entry to remove it.