Interactions for collection items

Design help Animations & Interactions
1

Hi all. I’m asking a similar (possibly the same?) question as this one: No interactions on collection items?

It was asked about a year ago, so maybe something has changed since then.

Is it possible to create interactions that operate on collection items? We would like a button to show/hide a div that contains an image. The content isn’t even derived from the collection; it just goes along with the template.

Currently we can get a single button/content pair to work outside of the collection list, but once we move it to a collection list, it doesn’t work any more. Seems it is picking up something from the collection, but I’m at a loss to say what or why.

I’ve been helping my wife build a site, and have resorted to unholy measures like having a collection item include a display: none div with child text containing some ID, and then using jQuery to adjust the DOM afterwards with the stuff that I can’t figure out how to do with the Webflow UI.

(And yeah, it is easier for me to reason about this from a JS perspective, since that’s my day job; I just need to find a way to get this to work so she can take it over where I leave off.)

2

Yes. Your interaction must follow those rules:

  1. trigger (IX) must be set on a PARENT or SIBLING element of all the elements targeted by the interaction’s actions
  2. IX actions must target a CLASS and be limited to either parent or sibling

This way, the IX will only happen on a single item and not on all items at once.

1 Like
3

Thanks. That did do the trick.

4

I dont think that it works

5

I also have problem to animate collection items with interactions.
I tried to add “Scroll into view” Slide from bottom.

You can find the collection items underneath the headline “Was uns beschäftigt”.

https://preview.webflow.com/preview/pwebsite?utm_medium=preview_link&utm_source=designer&utm_content=pwebsite&preview=9136b814aa02e4fb5f787f14014278f7&mode=preview