Relume Community Icon

Home

Announcements
General
Showcase

Powered by Tightknit

Building an Interactive Infographic in Webflow: Seeking Insights

·

·

Hi All.... I'm attempting to build an interactive infographic inside Webflow and I could use some insight on the most efficient way to do so. Below is a a loom that walks you through what I'm trying to achieve.

Loom
Read Only Link

Building an Interactive Infographic in Webflow: Seeking Insights | Relume Community

33 comments

· Sorted by newest

Loading comments

Matt J.
·
·
💪
Quinn B.
·
·
Thanks again for your help.
Quinn B.
·
·
For sure...I'll give it a go.
Matt J.
·
·
again it could at the very least be a proof of concept and if you like the overall direction, you'd essentially do the same thing in Rive or Lottie
Quinn B.
·
·
Hey ... it works. I'll give it a go.
Matt J.
·
·
its super old school haha, if you are okay with the "click" point being a little larger than the info icon
Matt J.
·
·
it gives you a larger tolerance for flexibility while maintaining a consistent visual
Matt J.
·
·
so maybe on a certain screen size, the hotspot is invisibly off center from the info icon, but the user has no idea since they can click anywhere around the info icon and trigger the modal
Quinn B.
·
·
oooh... so the div whouldnt be the hot spot.
Matt J.
·
·
Quinn B.
·
·
Right on... I'll give a whirl. Thanks for you help!
Quinn B.
·
·
ahhh... gotcha.... So the hot spot would be the entire div. Makes sense.
Matt J.
·
·
then we use a larger hotspot and move that around so that the user can interact with the info icon.
Matt J.
·
·
The benefit is that you are doing somewhat of what we talked about - separating the "trigger" of the modal from the visual - if we keep the icon within the graphic - its always consistently positioned, regardless of what is happening to the graphic
Matt J.
·
·
I would structure your container div to essentially have 4 quadrants so that the triggers are somewhat predictable - the trigger will stay relative to its own quadrant.