Jump to content
Search Community

Update Tween based on mouse position?

pfreema1 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello!

 

I am trying to re-create a hovering animation similar to the one found here when hovering over the location divs:  https://meowwolf.com/ 

 

I originally tried just using requestAnimationFrame and updating the css values inside that function, but it turned out very jittery.  Then I thought perhaps I could run a setInterval function that would run every .5 seconds and get the current mouse position, then use gsap to tween to that position.

 

The codepen shows the results.  It seems to be repeating the tween, but I'm not sure why.  

 

I could be approaching the problem completely wrong as well, so any suggestions on that front would be much appreciated.  Thanks!

See the Pen vagjqJ by pfreema1 (@pfreema1) on CodePen

Link to comment
Share on other sites

So I think I found the problem.  I don't think the code above was updating the mouse position.  Here's what it's supposed to look like: 

See the Pen BPpVYb by pfreema1 (@pfreema1) on CodePen

 

 

So here's a secondary question:  the elements inside the wrapper seem to jump a bit at the beginning of the hover and and the end of the hover.  Any ideas on why that is?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...