Jump to content
Search Community

Gallery movement

TrulyNewbie test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi Cassie, thanks for your help.

I took your advice (thanks!), but I have 3 more questions. How do I slow it down on hover? & How do I move the cursor faster than the image? and how do i inverse the direction? so up is down, left is right.

I tried this: 

See the Pen bGoaqVg by NewbieRuby (@NewbieRuby) on CodePen

 and this 

See the Pen gOGogBO by NewbieRuby (@NewbieRuby) on CodePen

 

Thanks again

Link to comment
Share on other sites

  • Solution

The main challenge here is to work out what range you're getting back from the mouse movement, then work out how much you want to move the grid and the map those two ranges.

Plugging the mouse position directly into the tween isn't going to give you the effect you want - you want the x and y position to be equivalent to values in the range you want to shift the grid by.

 

Luckily GSAP has some utility functions so you won't have to do all the math yourself!

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange()

 

Quote

Maps a number's relative placement within one range to the equivalent position in another range. For example, given the range of 0 to 100, 50 would be halfway between so if it were mapped to a range of 0 to 500, it would be 250 (because that's halfway between that range). Think of it like ratios.

 

See the Pen qBPprxW?editors=0110 by GreenSock (@GreenSock) on CodePen

  • Like 2
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...