DenFin Posted March 5, 2020 Share Posted March 5, 2020 Hi there, I'm curious about how to achieve an effect similar to this: https://www.davidwilliambaum.com/ I know they used the canvas element. And I found forum threads/codepens where parts of the effect are achieved without canvas. Parallax: https://greensock.com/forums/topic/17320-background-parallax-effect-on-mouse-move/ Mousemove: Is there a GSAP plugin for the zoom effect of the images which depends on the mouse position? Thanks in advance See the Pen 65cdc21ce5c49da45709ff9d09d0a754 by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 5, 2020 Share Posted March 5, 2020 Hey DenFin and welcome to the GreenSock forums! 7 minutes ago, DenFin said: Is there a GSAP plugin for the zoom effect of the images which depends on the mouse position? No, nothing that specific. But GSAP can animate the properties for you most definitely 8 minutes ago, DenFin said: I'm curious about how to achieve an effect similar to this: https://www.davidwilliambaum.com/ How this is likely done: Layout a bunch of images scaled down in a <canvas> Calculate the distance from the mouse to the center of each image. If that distance is within a certain range, scale up (towards its intrinsic size) that image based on the distance to it. Determine which image is the closest, make sure that image is rendered on top and change the text based on which image it is. Move the context around based on the mouse position and how far it needs to go to see all images given the current viewport. You could do the same thing without <canvas> but it wouldn't be as performant. Using <canvas> or WebGL is definitely the way to go if you ask me Does that help? Do you have any other questions? 4 Link to comment Share on other sites More sharing options...
DenFin Posted March 5, 2020 Author Share Posted March 5, 2020 Hi Zach, thanks for your quick reply! Yes, that helps a lot! I will try out something, and when I have more specific questions I'll post them here. Link to comment Share on other sites More sharing options...
Frank Fotodesign Posted April 14, 2020 Share Posted April 14, 2020 Hi DenFin, did you get any results in creating these effects? Regards Pete 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