Jump to content
Search Community

Recreating zoom / pan function

kodralex test
Moderator Tag

Recommended Posts

Hi,

 

I'm trying to re-create a function like used on this page: https://dark.netflix.io/en/family-tree (I know this site was built using gsap).

 

I don't have a working pen right now. But I'll build out the main content of the page using html <canvas> then I just need to be able to zoom in / out / pan around and create slight tilt effect on mouse movement. My question is which of the various gsap plugins should I be using for which parts? Any help in the right direction will be great before I have a go at this.

 

I did do a little searching beforehand and found this nice zoom / pan function (see codepen below). 

 

Maybe something like this for the tilt function (see codepen below)

 

Not sure if it matters to much but I think these examples might be a little old now (not using gsap 3)

 

Thanks in advance.

 

 

See the Pen ZEeqBmZ by alexkodr (@alexkodr) on CodePen

 

See the Pen pedmMW by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Looks like a fun and ambitious project, @kodralex

 

Was there a GSAP-specific question you needed help with? As for which plugins you'll need, I'm not sure you'll need any. It really depends on what exactly you end up doing. If it's all canvas-based, then you're probably fine with just the core GSAP file. Maybe Draggable if you end up having draggable stuff :)

 

Good luck!

  • Like 1
Link to comment
Share on other sites

Thanks for getting back to me Jack. What you said sounds great. I'll update the post with my own codepen if I get stuck on anything. I'll also add a final codepen once i'm done. It might be of use to someone else at some point.

  • Like 1
  • Thanks 1
Link to comment
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.
×
×
  • Create New...