christof Posted July 28, 2022 Share Posted July 28, 2022 I'm trying to reproduce an effect similar to this one https://www.sarahandsebastian.com/ my objective is to have a large div in which I would arrange images and at the movement of the cursor to walk me in the div by having in more a movement of parralax on the images, I wanted to know if it is possible to obtain this effect using gsap. Link to comment Share on other sites More sharing options...
GreenSock Posted July 28, 2022 Share Posted July 28, 2022 Of course - GSAP can animate literally anything JavaScript can touch. So all the movement can be handled by GSAP, but you'd need to wire up all the logic. There isn't an automated effect that does it all for you. I'd probably think of it like the window.innerWidth and window.innerHeight are mapped to the width/height of your overall bounding box of the whole area, and just animate the x/y of the container according to the position of the mouse in the viewport. gsap.quickTo() may come in very handy. Also, gsap.utils.mapRange(). Good luck! 1 Link to comment Share on other sites More sharing options...
iDad5 Posted July 29, 2022 Share Posted July 29, 2022 Just an Idea, that might or might not work for you, if you set slight different transformZ values on you images and a matching perspective on the container, you might get the parallax more or less for free. (you could also animate the z-value with GSAP - maybe in relation to the movement speed of the mouse - Observer plugin comes very handy for those things) And as I'm on it - using tilt sensors on tablets and mobiles can be very cool... 1 Link to comment Share on other sites More sharing options...
christof Posted July 29, 2022 Author Share Posted July 29, 2022 Thank you very much for your feedback, I will take a closer look and come back as soon as I can with a first codepen 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