Dynamic hover effects with CMS items as triggers

HI!
I have a rather complicated problem that I can’t solve on my own.

In my portfolio I have ordered my professional experiences in a vertical timeline. It is made up of two parts:

  • the list of experience boxes (got from a CMS Collection)
  • the actual timeline, made up of lines and circles.
    The two parts are not connected. The list appears automatically. Instead I manually set the position and length of each timeline item (using classes).

What I would like to add is an hover effect on the timeline. I would like that when the user goes hover each experience block, the color of the relative lines and circles would change.

I know several ways to change the color. My problem is with the trigger.
In fact, I could use the elements of the list as triggers, but I wouldn’t be able to animate a specific line and circle (and exclusively those!).
How can I use items in a Collections list as triggers to let each of them dynamically animate a different item?

Thanks in advance, I hope I was clear and you can help me :slight_smile:
Don’t hesitate to ask for further information!

Martina


Here is my public share link: LINK - the published version: Martina Asara - Esperienze professionali
(how to access public share link)

In Webflow, there are two main approaches I use, depending on the situation.
From an interactions perspective there are two parts here- the trigger, and the target.

If the trigger and target are 1:1, than the easiest way is usually to put both the trigger and the target into the same collection item, and arrange them so that the trigger can target a relative element - sibling, or child. You can still use e.g. absolute positioning to adjust where the elements appear, but they have to be together in the DOM for IX2 targeting to work here.

Example of 1:1 - a real estate property site. You have a bunch of cards, and clicking should display a sidebar or a large modal with more property detail.

If the trigger and target are N:1, than I use two collection lists, one containing just the proxy-triggers, and one containing just the targets. In the target’s collection list is a hidden button which is the actual trigger for the interaction ( again, sibling reference ). The JS watches your proxy-trigger element for your event ( mouseover in your case ) and then clicks the actual trigger button.

Example of N:1 - an article with lots of tooltips and dictionary definitions. You want to be able to hover or click on a highlighted word, and have a modal appear which contains the definition. The same word can appear many times in the same article.

I haven’t unpacked your design but I’d assume it’s 1:1 which is easier IF you can get your timeline portions into your collection list and make it arrange the way you want. If not, you can use the N:1 proxy-trigger approach which allows them to be separate parts of your layout.

SA5 has build-in proxy-trigger support using attributes, which we primarily use on things like maps with pins, dictionary definition, pop-ups and modals…

Note that if you go with the proxy-trigger approach, and want to do mouseovers, you’ll probably need two separate hidden trigger buttons to turn on and turn off your highlighting, and your mouseover event handler will also need to watch for onblur. SA5 doesn’t currently support multiple different event handlers, so you’d just build your own event handler and trigger-click code.

2 Likes

Thank you for your immediate support!

I haven’t used your solution, but it was really inspiring.
In fact, I studied the “1:1/N:1” problem and I was able to put together all the parts (experience box and timeline) in the single Collection element.
To make the height/length of each line dynamic, I used a numeric field from the Collection.
The following is the custom code I inserted in place of the line:

<div class="Line-height" style="height:calc( *number-field* px); width:2px;position:relative;"></div>

It may be useful to mention that you need to use the “+Add field” button on the left, to add the Collection field.

Next, I easily applied the color effect on hover, using interactions. So, thank you again!

There’s only one step left that I can’t solve.
I would like the hovered element to move above the others. I tried adding a “move” animation for the z-index, but it didn’t work, even though the elements position is relative.

Can anyone help me again? :pray:

Martina

hi @Martina_Asara here are two simple examples of principles how to change secondary element when hover on primary.

The first example is simple as is targeting elements outside.

The second example is about when element is wrapped in parent (like eg. CMS item)
I have added comments be able to understand what is code doing (just in case)

I do not know if will be helpful some way to you but It is just another way how to solve it. :man_shrugging:

1 Like

Thank you to Stan also!
I’m going to leave all your answers, because they might be useful for other people. :slight_smile:

1 Like