Interactive Diagrams

Howdy,

I have a potential client that is looking to integrate some interactive functionality into a new website. There is no share link or existing project yet.

They want to create an interactive diagram that illustrates their capabilities. The layout would appear similar to the image below, potentially using the icons overlaying the image as triggers to expand capability content.

Can anybody share examples of this kind of interactivity being built in Webflow? I imagine it could require lottie animations, but I’m not too certain where to begin. Thanks for any help!

Hey,

I don’t have an example ready, but if you just need an image (not a 3D object) with buttons positioned on top of it, you could use a div-wrapper (containing the image) set to position: relative, and the buttons positioned on top of it using position: absolute. :slight_smile:

Hey Daniel,

Check out this tutorial, it should provide you with everything you need. He’s using CMS items, but in your case, it sounds like the biggest thing you need to know is how to position things properly.

This is a perfect example @bryanmanio, I really appreciate the share! Also thank you @robingranqvist, that approach sounds like the right way to go.