Instructions

This interaction adds a dynamic mouse trail animation to your Webflow site. When the user moves the cursor inside a section, an image smoothly appears at the cursor position, scales up, and fades away as it moves downward — creating a cinematic visual flow powered by GSAP.

Below you’ll find a complete explanation of how the animation works and how to customize it.

GSAP Mouse Trail Animation — Instructions

‍

‍

🧩 Structure Overview:

To make this interaction work, your layout must include the following classes:

| Element        | Class Name         | Description                                                   |
| -------------- | ------------------ | ------------------------------------------------------------- |
| Main wrapper   | `.gsap-component`  | The container that holds the entire GSAP interaction          |
| Visual wrapper | `.gsap-wrapper`    | The container where the animated images will appear           |
| Image element  | `.gsap-image-wrap` | The element that contains the image being cloned and animated |

‍

⚠️ Make sure the class names match exactly (all lowercase, separated by hyphens).

‍

⚙️ How the Animation Works:
  1. The script looks for every .gsap-component on the page.
  2. It tracks the mouse movement inside that area.
  3. Each time the cursor moves more than 100px, the animation triggers.
  4. The .gsap-image-wrap element is cloned and positioned at the cursor location.
  5. Using GSAP, the cloned image fades in, scales up, and then fades out while moving downward.
  6. Once the animation finishes, the image clone is automatically removed from the DOM — keeping performance smooth.

This creates a floating image trail that follows the user’s cursor with an elegant, minimal animation.

‍

🧠 Customization Guide:

‍

1. Adjust the Trigger Distance

To control how often the animation activates, locate this line:

if (Math.abs(xPosition - e.pageX) > 100 || Math.abs(yPosition - e.pageY) > 100)

‍

Change the 100 value to:

  • Smaller value (e.g., 60) → animation triggers more frequently
  • Larger value (e.g., 150) → animation triggers less frequently

‍

2. Modify the Entry Animation

This part controls how the image appears:

tl.fromTo(imageWrap,
  { opacity: 0, scale: 0.5 },
  { opacity: 1, scale: 1, ease: "power3.out" }
);

‍

  • You can adjust:
    • opacity: how visible the image starts
    • scale: the zoom amount when it appears
    • ease: the smoothness of the motion (try "expo.out" or "back.out(1.7)")

‍

3. Edit the Exit Animation

This line defines how the image disappears:

tl.to(imageWrap.find("img"), { opacity: 0, y: "8rem", duration: 0.5 });

‍

  • opacity: controls fade-out strength
  • y: defines the vertical movement — use negative values (e.g., "-8rem") to make it move upward
  • duration: how long the animation lasts (increase for slower motion)

‍

4. Change the Animation Direction

If you prefer a horizontal or diagonal motion, you can add or replace movement properties:

tl.to(imageWrap.find("img"), { opacity: 0, x: "6rem", y: "6rem", duration: 0.6 });

‍

This will make the image move diagonally as it fades out.

‍

5. Use Different Images

If you want to use different visuals, simply replace the image inside .gsap-image-wrap in your Webflow Designer.
You can duplicate this element or change the image source manually — no CMS setup is required.

‍

💡 Pro Tips

‍

  • ou can duplicate the .gsap-component section to use the effect in multiple parts of your site.
  • Always keep the GSAP library <script> tag above the interaction script.
  • For best performance, keep your image file sizes optimized.
  • Test the interaction on different screen sizes to ensure smooth behavior.