Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
HeadGremlin

Is gsap with any methods that can change div size according to mousemove?

Go to solution Solved by GreenSock,

Recommended Posts

Hi all,

I'm trying to make this happen with gsap (a quick draft for explanation):

image.thumb.png.8286a766dda49470d301ee52170f2bc8.png

 

The red dot is client's mouse, wherever it moves, the grey circles will scall to 1.5x or 2x according to the distance to the mouse position,

if the circles not in the yellow area, then it will be normal size.

Can anyone help me with it?

See the Pen ExQGNXN by utapdio (@utapdio) on CodePen

Link to comment
Share on other sites

  • Solution

First of all, thanks for being a Club GreenSock member, @HeadGremlin🎉

 

We don't normally do this (build out solutions), but this was a fun challenge for me so I went ahead and whipped together a little demo with one way of doing it: 

See the Pen RwQEKBw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I added some commented-out code for if you want to break things into an Array for columns and another for rows because if you're gonna have a lot fo them, you may want to optimize the algorithm so that it can skip the out-of-range columns/rows. I don't have time to do all of that for you (optimization is a deep topic), but hopefully this gets you moving in a good direction. 

 

Enjoy!

  • Like 4
Link to comment
Share on other sites

Thank you so much, this is exactly what i want 😄

Link to comment
Share on other sites

I realized that your elements may reflow if the window gets resized, but my code was based on an assumption that the circles would ALWAYS be in a particular configuration (10 columns, 5 rows). I simplified things a bit and made it responsive and added the ability to tweak the maximum scale: 

See the Pen PoQVjWv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

So now if you resize and reflow the elements, it still works properly. 🎉

  • Like 3
Link to comment
Share on other sites

I just can't help myself - I wanted to show how you could add a little animation so that it's almost like the mouse position lags (you can set a variable to control how long that lag is):

 

See the Pen gOvqovL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Feels a little nicer in my opinion. 

 

Okay, I'll stop now. :)

  • Like 3
  • Thanks 1
  • Haha 1
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.
×