Anyone know how you could recreate this in Webflow?

Design help Animations & Interactions
1

Hi Guys,

I am contemplating but can not figure out how I would make this world map with animated (clickable) destinations:

I need to add like 15/20 destinations so on fade out they will need to disappear so you don’t click on a ghostlink.

Any tips would be very welcome!
Thanks

Here is my public share link: LINK
(how to access public share link)

2

Hey Anton.

This is a bit hard.

How they did it, was to have a div with the globe as a background image. Inside this div they added all the links. giving each link a different class like mapItaly, mapDenmark and so on…
They then placed the links in the desired place with Position Absolute

After that you give every link a interaction with the initial appearence as Display none and a 0.01 scale. (Webflow cant change font size in interactions right now)

240×951 18.8 KB

Then you make a new interaction. This is the main interaction to make everything move.
Add a trigger on load and give it these animations:
240×959 20.9 KB

You can change the values however you want.

A bit timeconsuming :slight_smile:

-David

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.