TrulyNewbie Posted December 27, 2021 Share Posted December 27, 2021 Hi, so I'm trying to mimic this style: https://www.rvlt.net/gallery I know I need to invert the movement, but I just don't know how to make it feel like same as the websites. I'd appreciate any help! Thank you See the Pen ZEXvBgO by NewbieRuby (@NewbieRuby) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 27, 2021 Share Posted December 27, 2021 Hi there - The images aren't following the mouse in that website. They're positioned in a grid and then the grid is offset slightly depending on mouse movement. Hope that helps! Link to comment Share on other sites More sharing options...
TrulyNewbie Posted December 27, 2021 Author Share Posted December 27, 2021 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 More sharing options...
Solution Cassie Posted December 27, 2021 Solution Share Posted December 27, 2021 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 2 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted December 27, 2021 Author Share Posted December 27, 2021 Thank you so much. I've never used a map before. Thank you 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now