Hey! I’ve already created a “card style stacking” interaction using images pulled from a CMS collection and sticky scrolling I’ve been trying to scale & fade out the bottom card as the next card comes into view, however any interactions I create get applied to the whole collection, so I can’t seem …

Hey @bensilvertown , although still with custom code this should get you very close. You can change the height to any value of your preference. You would also want to add an a transition for the Image collection item, so that when the code triggers the change is not abrupt. [Screen Shot 2020-05-03…

Hey @bensilvertown , I would prefer using Jquery/Js to assign a numbered class to each item. And then create a placeholder element with the same numbered class on the Editor and assign an Interaction that targets the class. I have never tried this, but it makes sense in my head. Hope it makes sense…

Thanks for the quick reply @dennyhartanto That does make sense! Unfortunately I’m not too versed in jQuery/JS. I assume I’d need a piece of custom code which searches the DOM for the relevant collection, adds a numbered class relative to the child number? Ben

Yeah I can help get you started. $('.collection-item-class').each(function(index){ $(this).addClass('custom-' + index); }) You need to change the collection-item-class to a class you use. Do check in inspect if the classes were added. Next step is to create a div with an actual custom-1 and add i…

@dennyhartanto I’ve got the jQ successfully adding a numbered custom class to every collection item. However the interactions I apply don’t seem to be mirrored on the collection items :disappointed: I’m applying a while scrolling in view interaction on custom-1 which animates opacity and scale of…

[image] dennyhartanto: Webflow.require(‘ix2’).init() Sorry you might have to walk me through this bit. Where would it go? In a script tag before end of the body tag? @dennyhartanto Would there be a way of applying that same interaction pattern in a waterfall fashion without having to re-cre…

This is awesome! Works perfectly thanks Denny :smile:

Glad it worked! I should’ve checked the read-only link better before bringing you to weird code town.

Hey Denny - I am looking for help with something similar - I want to trigger visibility of individual records in a collection (all wrapped up in pretty div blocks, of course) [find this structure under Songs Canvas->Collection List Wrapper-> etc…] from a click on a div block containing unique, non-c…

Target individual collection item for interactions? 🤔

Design help Animations & Interactions

dennyhartanto (Denny Hartanto) May 2, 2020, 7:17pm 6

Hey @bensilvertown, adding this code Webflow.require('ix2').init() after the class has been added should work. Basically it tells webflow to find all elements again.

Topic		Replies	Views
Collection List items can't be targets of Interactions? Animations & Interactions	2	2105	June 1, 2018
How to apply different interactions clicking on different list items? Animations & Interactions	10	3439	May 20, 2022
Adding animation to collection list items Animations & Interactions	6	4987	August 2, 2019
Interactions for collection items Animations & Interactions	4	2324	January 30, 2021
How to give cms items unique animations and not the whole collection CMS	8	3185	March 6, 2023

Target individual collection item for interactions? 🤔

Related topics