Jump to content
Search Community

Canvas Image Gallery with mousemove zoom and parallax

DenFin test
Moderator Tag

Recommended Posts

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

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?

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

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...