Icon - Onart Webflow Template
How to customize the GSAP animation

Instructions

This interaction adds a dynamic 3D mouse trail animation to your Webflow site. As the user moves the cursor inside a section, a sequence of images appears and follows the cursor with realistic perspective, tilting and shifting in depth — creating an immersive, tactile visual effect powered by GSAP.

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

GSAP 3D Trailing Image Animation — Instructions

‍

‍

‍

🧩 Structure Overview:

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

| Element        | Class Name       | Description                                                                 |
| -------------- | ----------------- | ---------------------------------------------------------------------------- |
| Main wrapper   | `.gsap-wrapper`   | The container for each interactive area (you can have multiple on the page) |
| Image wrapper  | `.image-wrap`     | Inner container that defines the animation boundaries and 3D perspective    |
| Image block    | `.image-block`    | Individual image elements that get animated and cycled through in sequence  |

‍

⚠️ Make sure the class names match exactly (all lowercase, separated by hyphens).⚠️ Unlike a cloning-based trail effect, this interaction reuses a fixed set of .image-block elements already placed inside .image-wrap — it does not duplicate them dynamically. Make sure you add as many .image-block elements as you want images in the trail.

‍

⚙️ How the Animation Works:

‍

  1. The script looks for every .gsap-wrapper on the page.
  2. It tracks the mouse movement inside that area.
  3. Each time the cursor moves beyond the defined distance threshold, the animation triggers.
  4. The script calculates the cursor's position relative to the center of .image-wrap, converting it into 3D rotation values and a depth (Z-axis) value.
  5. The next .image-block in the sequence (cycling back to the first once it reaches the last) is animated from its previous position to the new cursor position, tilting and scaling based on depth.
  6. Shortly after appearing, the image fades out while moving backward in 3D space, creating a sense of depth as it disappears.
  7. Since the images are reused (not cloned), there's no cleanup needed — the same elements are recycled every time the cursor moves.

‍

This creates a floating, tilting image trail with a realistic 3D perspective that follows the user's cursor.

‍

🧠 Customization Guide:

‍

1. Adjust the Trigger DistanceTo control how often the animation activates, locate this line:

var threshold = 80;

‍

Change the 80 value to:

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

‍

2. Adjust the 3D Rotation IntensityThis part controls how much the images tilt based on cursor position:

var rotX = -(relY / (containerRect.height / 2)) * 30;
var rotY = (relX / (containerRect.width / 2)) * 30;

‍

  • The 30 value sets the maximum rotation in degrees.
  • Lower it (e.g., 15) for a subtler tilt.
  • Raise it (e.g., 45) for a more dramatic, exaggerated 3D effect.

‍

3. Adjust the Depth (Z-Axis) EffectThis section controls how far images appear to move toward or away from the viewer:

var zValue = proportion * 1200 - 600;

‍

‍And how that depth affects the image scale:

scale: 1 + (zValue / 1000)

‍

  • Increasing 1200 and 600 increases the range of depth movement.
  • Adjusting the 1000 divisor in the scale formula changes how strongly depth affects image size — a smaller number makes the scale effect more intense.

‍

4. Modify the Movement AnimationThis part controls how the image travels from its previous position to the new cursor position:

tl.fromTo(img[0], {
  opacity: 1,
  z: 0,
  scale: 1 + (zValue / 1000),
  x: prevPosX,
  y: prevPosY,
  rotationX: prevRotX,
  rotationY: prevRotY,
}, {
  duration: 1,
  ease: "expo.out",
  scale: 1 + (zValue / 1000),
  x: posX,
  y: posY,
  rotationX: rotX,
  rotationY: rotY,
}, 0);

‍

  • duration: how long the movement takes (lower for snappier motion, higher for a smoother glide)
  • ease: the motion curve (try "power2.out" or "back.out(1.4)" for different feels)

    • ‍

    ‍

    5. Modify the Exit AnimationThis part controls how the image fades and recedes into the background:

    I

    tl.to(img[0], {
  duration: 0.4,
  ease: "power2.out",
  opacity: 0,
  z: -800
}, 0.3);

    ‍

  • opacity: controls fade-out strength
  • z: how far back the image moves in 3D space as it disappears — use a smaller negative value (e.g., -400) for a subtler recede, or a larger one (e.g., -1200) for a stronger effect
  • duration: how long the fade-out lasts
  • The last value (0.3) is the delay before the exit animation starts, relative to the timeline — increase it to keep the image visible longer before it fades

    • ‍

    6. Add or Change Images

    Since this interaction cycles through existing elements instead of cloning from a CMS list, simply duplicate the .image-block element inside .image-wrap in your Webflow Designer to add more images to the sequence, or replace the image source on each block to change the visuals. No CMS setup is required.

    ‍

    💡 Pro Tips

    ‍

    • You can duplicate the .gsap-wrapper section to use the effect in multiple parts of your site.
    • Always keep the GSAP library <script> tag above the interaction script.
    • Adding more .image-block elements creates a longer, richer trail — but keep an eye on performance with too many high-resolution images.
    • For best performance, keep your image file sizes optimized.
    • Test the interaction on different screen sizes to ensure the 3D perspective feels natural on both desktop and mobile.
    • ‍