Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DenFin

Canvas Image Gallery with mousemove zoom and parallax

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: https://codepen.io/osublake/pen/65cdc21ce5c49da45709ff9d09d0a754

 

Is there a GSAP plugin for the zoom effect of the images which depends on the mouse position?

 

 

Thanks in advance

Share this post


Link to post
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 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Hi DenFin,

did you get any results in creating these effects?

Regards

Pete

Share this post


Link to post
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.

×