How to give cms items unique animations and not the whole collection

Design help CMS
1

I’m having a collection of doctors who each have a unique description.
What I want to do is when I click on one doctor’s photo, his/her description appears and the description of the other 2 are not visible.

I’d also like that when one picture is selected, the other 2 are blurred out.
I’ve tried different things, but I only get to do the animation on the whole collection and not on one item per collection.

Thanks in advance for helping me out!

Here is my public share link: https://preview.webflow.com/preview/hand-en-polskliniek?utm_medium=preview_link&utm_source=designer&utm_content=hand-en-polskliniek&preview=4cf71b1c42a322bacd7449288e5817a0&pageId=5f1aa6a0d6743319bca9f242&mode=preview

1 Like
2

Hi @jonasdr, all you have to do to have the interaction affect only one collection item is to select that the animation affects only the “selected element” and not class - this is picked as an option when you are designing the interaction
Screen Shot 2020-08-20 at 11.17.49 AM

3

IVG, thanks for your answer but it’s not really working.
I’ll give an example:
3 pictures, and below are 3 rich text elements.
I place an animation on picture one to hide on rich text element below (text element is part of the collection list). What happens is, ALL the rich text elements dissapear, while I just want 2 to dissapear and one to show.

4

You figure this out yet?

5

I have a very similar issue.

6

I have a very similar issue [2]

Any tips on how to select a collection item in interactions?

7

Same issue for me today

8

I believe it can’t be done with Webflow CMS, sadly :frowning:

9

Hey Guys

I figured it out you need javascript to apply a unique class to each one of your collection items and then remove it when you un hoverL here is my javascript:

document.addEventListener(‘DOMContentLoaded’, () => {
const elements = document.querySelectorAll(‘.collection-item’);

elements.forEach((element) => {
element.addEventListener(‘mouseenter’, () => {
element.classList.add(‘animate-this’);
});

element.addEventListener('mouseleave', () => {
  element.classList.remove('animate-this');
});

});
});

and then add some css to style what you want for the new class name you added: in my case its .animate-this You will also need to change ‘.collection-item’ to your class name for you collection item