Can the new interaction do the animation based on cursor position?

Design help Animations & Interactions
1

Hello the community,

I was looking at new interaction to make what old interactive can do with animation react based on cursor position X and Y. like for example a div move from -30px to +30px.

but I couldn’t find anything, is it because it’s not supported in the new interaction? or i’m just dumb couldn’t find it? I end up switch back to the old one to achieve this effect.

Thanks

2

Hi there!

For mouse-based animations that respond to cursor position, you’ll want to use Classic interactions rather than the new GSAP system. While GSAP interactions are powerful, Classic interactions are currently better suited for cursor-based effects. To switch to Classic interactions:

  1. Open the Interactions panel
  2. Click the toggle switch at the top to change from “GSAP” to “Classic”
  3. Create your mouse move interaction using the Mouse Movement trigger

Classic interactions give you direct control over how elements respond to cursor position, allowing you to create effects like parallax scrolling, cursor-following elements, and hover states with position-based animations.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

Hey there,
I’m the PM working on the new GSAP Interactions feature. :waving_hand:

The AI bot actually did pretty good here. We do not yet have mouse move functions in New Interactions. This is on our To Do list.
Using Classic Interactions is the way to go for now, but the place to switch between them is in the bottom of the right hand Interactions panel.

1 Like
IX3 Mouse Move Interactions available?