Jump to content
Search Community

Opinion/help wanted: Create an interactive (SVG) map.

Teun87 test
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

Hi everybody,


At the moment we are looking for the best options/frameworks to create an interactive map with JS, HTML and CSS. At this point we're also considering to implement small animations. Since we do not have a lot of experience I would love to hear your opinion about the following:


The idea is to create a static (SVG) map with interactive buildings on it (with animated hover state). When you click on it a panel with more information and follow-up pages comes sliding in. Would GreenSock form a good base to setup the interactive map? We need to be able to select the buildings based on inside and outside-map clicks.


More ideas or suggestions? Please!


Kind regards,


Link to comment
Share on other sites

Hi @Teun87 :)


Welcome to the forum.


GSAP can certainly handle the animation for your project -- no problem. Please keep in mind that GSAP is an animation engine and doesn't do any of the rendering. That's all done by the browser. From your description I think an SVG should work well. Depending on how complex and big the maps are going to be, you may also want to look at canvas instead of SVG. Browsers do have their limits. I'd say go ahead and download GSAP for a test run and see what you think. Good luck with your project.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

  • 1 year 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...