Component
Interactive Map Interaction in Framer
This is an interactive map recreated in Framer from Kumail's work. Remix the project and explore how to create this type of interaction in Framer without writing any code.
About the resource
This interaction consists of three components: Title hover, Map zoom, and a wrapper component called Interactive map. Each component has its own variants, which are connected through click interactions to create the animations.
About the resource
This interaction consists of three components: Title hover, Map zoom, and a wrapper component called Interactive map. Each component has its own variants, which are connected through click interactions to create the animations.
About the resource
This interaction consists of three components: Title hover, Map zoom, and a wrapper component called Interactive map. Each component has its own variants, which are connected through click interactions to create the animations.
The six variants of the interactive map component.
The six variants of the interactive map component.
The six variants of the interactive map component.
For example, in the map zoom component, I placed all map images nested within each other and set the opacity to 0. In its variants, I simply scaled up the main frame, adjusted the opacity to 1, and changed its offset values to achieve that zoomed-in effect.
For example, in the map zoom component, I placed all map images nested within each other and set the opacity to 0. In its variants, I simply scaled up the main frame, adjusted the opacity to 1, and changed its offset values to achieve that zoomed-in effect.
For example, in the map zoom component, I placed all map images nested within each other and set the opacity to 0. In its variants, I simply scaled up the main frame, adjusted the opacity to 1, and changed its offset values to achieve that zoomed-in effect.
The five variants of the map zoom component.
The five variants of the map zoom component.
The five variants of the map zoom component.
