Jump to content


Creating interactive 3D Map with GSAP and Canvas

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm new to GSAP and I'm trying to find a way to create an interactive map using a JPG image as the basemap and canvas and GSAP for the animation. I came across several examples on the GSAP website and a live project online that looks  exactly like what I'm intending: http://rainforest.arkivert.no/#kart

Can you tell me how is this done, or if there are any documentation/tutorial/workshop materials that I can go through.


Please advice.


Thanks in advance,


Link to comment
Share on other sites

This might be a job for three.js. 




I think you could rotate a jpeg on a plane to achieve it to a certain degree but it would still be a flat image so it wouldn't have the same effect, the example you show looks like a 3d model.


Beyond my pay grade on this forum though sounds like something  for Blake or one of the other big guns.



  • Like 3
Link to comment
Share on other sites

Thank you for the response.


I have tried reverse engineering and found out that it's not really a 3D model, it's a JPG.

I hope one of the big guns to respond soon :)

Link to comment
Share on other sites

Sorry, that's beyond the scope of what these forums are meant to address. We really try to stay focused on GSAP-specific questions. @OSUblake may have some suggestions for you (he does crazy complex/fun stuff regularly, but no guarantees. 


Good luck with the project!

  • Like 2
Link to comment
Share on other sites

That website uses Pano2VR player and draggable on top of that to control the view. I think using draggable on top of it has to be easiest part and in forum you will find multiple examples of how to control some values using draggable. Pano2VR on the other hand will take some process of creating 3D views, 360 images etc.



  • Like 3
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.