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.
Matt J. Shoot... thanks for letting me know. Here you go https://preview.webflow.com/preview/fireside-design-v1?utm_medium=preview_link&utm_sou[…]1&preview=59f95b599860f78135d9c8eaa6fe2626&workflow=preview
I can see that would break the visual concept/message though
hmmm.... I'm open to it for sure. Just not sure what that would be off hand.
yeah probably wouldn't pull off the same message at all honestly
so the other idea is to have the info icon also part of the image, and then have "hotspots" that you move around to trigger the modal
this keeps the "visual" consistent, while giving you a little bit of flexibility as the graphic moves around
I would make the hotspot bigger as well
the only other solution I can think of and is likely the path that would result in the highest quality would be to use an animation library for the entire thing - so GSAP or Rive or Lottie - since we can control those things via webflow interactions, we can create this kind of interactive graphic in those formats but still make it interactive in Webflow.
I thought about using those libraries but I've never used them before. Could be a good use case to learn I suppose.
so for example - the info icon would be inside of the artboard for the graphic and always stay in a single position right, and no matter what the graphic does, it also moves there but we're able to target a specific node (info icon) to trigger something (modal) regardless of where its at. I suppose as I'm writing this, the same could really be done potentially with javascript as well. Basically the problem you are running into right now is that you have the graphic and the trigger (info icon) as separate things, but they actually need to stay as one, and within one single document - but you need to be able to target the trigger in someway.
That is correct.
Since I'm still a novice to this stuff, I'm just looking for the path of least resistance.
I would try the hotspot idea then at least for proof of concept

