Hello!
I’ve been working at this for quite some time and still haven’t found a solution so I figured I would ask here:
I have a client who wants something very similar to the “Customize Your Workflows” section on the https://asana.com/ home page/landing page. I was able to figure out how to make the lines animated, but adding the icons was a whole other ordeal. I tried adding the icons overtop the dotted lines, but I was having major alignment issues with different screen sizes, etc.
Problems I’m running into:
- Webflow limits characters of embed code to 10,000, so if I have svg icons within the code, it’s always way over the limit. I’ve tried hosting within Github, but I feel like such a newbie I have no clue what extension to use, or how to embed the code correctly within Webflow. When I tried it, it either showed up as a black box, or lines of code that looked like it was straight from Github!
- Not sure how to make this responsive/scale appropriately like an image (until the mobile version, where it should scroll horizontally)
- Ideally I’d like to be able to hover over one of the icons, and maybe have the dotted lines stop animating and have some kind of hover state for an icon.
Right now I have the section on my client’s website as static SVGs, but I’d really like to be able to figure this out!
Here is my site Read-Only: https://preview.webflow.com/preview/onboardian?utm_medium=preview_link&utm_source=designer&utm_content=onboardian&preview=6915a1592ff6b8856fa265c5109f3ced&mode=preview