How to create an interactive info graphic

Design help Animations & Interactions
1

Hello!

I have created a “scrollytelling” type infographic for a client which can be seen here:

Screen Shot 2022-01-19 at 8.38.46 PM
Screen Shot 2022-01-19 at 8.38.46 PM1110×815 159 KB

Instead of having a “scrollytelling” type experience, the client would like to have each element of the wheel (4 in total) be clickable.

Upon an element’s click, any other active element’s state would be changed to “off” (become blue), and the element that has been clicked’s state would turn “on” (become yellow). Also the element’s associated text would appear/disappear.

I find trying to achieve this to be challenging with Webflow’s current interactive offering because there is no way for me to know which element to “turn off”.

I’m wondering if this is something I’ll have to custom program?

Thanks in advance to anyone who can help. And please let me know if I’m not explaining what I’d like to see clearly enough.

Update: I was able to find a temporary “hack” by using in-page linking. My question still does stand as I’m curious if it’s possible w/ webflow.

Here is my public share link: Webflow - Eyelliance

2

You can easily do that using Click (tap) interaction.

You’ve already done scroll based interaction so it will be similar to that. But we’ve to divide those in all four elements. And you’ll have to remove that interaction of scroll.

On your wheel you’ve 4 links, on that remove in-page link and just put a # for link.

  • Now from the interaction panel add Click (tap) interaction for that link
  • For first click add new animation
  • Now select your target container > click on Add Action > choose Opacity and set Opacity to 100
  • Now select your highlighted graphics under that link > click on Add Action > choose Opacity and set it to 100
  • Now click Done

Now for the 2nd click do the same process as above but for Opacity value enter 0. And interaction for one of your link is done, now you just have to do it for other 3.

For this implementation it is best if your containers and yellow wheel graphics are hidden at first.

Note: You can use Hide/Show in the action as well.

3

Hi @abirana - thank you for your proposed solution!

Unfortunately it didn’t work as expected as I needed to account for the states of each section. I was able to come up with my own solution by mixing a little bit of Webflow’s interactive programming as well as custom jQuery. You can click the original link and see it in action.

4

Oh I did miss to write about switching off other parts when one is clicked. But that can also be achieved by adding couple more actions.

But you seems to know what you are doing, so if jQuery works for you then great.

Also it might be better to write custom CSS for that hover effect instead of jQuery script for hover. You’ll have few less scripts.

5

That’s a really good idea @abirana - thank you!