Target individual collection item for interactions? 🤔

[bensilvertown]

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 to get this to work.

• Any way to add a custom class on each collection item and then target that in the interactions panel?
• Alternatively I was thinking I could target each item with the “nth child” selector, but unsure how I’d connect this to animations controlled in the interactions panel.

Any ideas or solutions would be amazing
Live stage site here: LINK
Public share link below

---

Here is my public share link: LINK
(how to access public share link)

[dennyhartanto]

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 to you.

[bensilvertown]

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

[dennyhartanto]

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 itneraction there.

[bensilvertown]

@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

I’m applying a while scrolling in view interaction on custom-1 which animates opacity and scale of custom-0 which works on the placeholders but not the collection items.

[dennyhartanto]

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.

Reinitialize Webflow IX2

Joho, Jaro, did you manage to implement this? tried a couple of different version of this, but no dice yet… $(document).ajaxSend(function() { Webflow.destroy() }); $(document).ajaxComplete(function() { window.Webflow && window.Webflow.require( 'ix2' ).init(); }); http://ajax-navigation.webflow.io/ here is the playground. The arrows on the sliders have IX2 animations. Not sure what I’m missing. Any ideas? @danro @andy_burke

[bensilvertown]

@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-create the interaction for every card in the stack?

At the moment I’d need to create an interaction on custom-1 affecting custom-0, custom-2 affecting custom-1, custom-3 affecting custom-2 etc etc.

Which might get messy if more items in the collection get added.

[dennyhartanto]

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.

$(window).on('scroll', function(){
var height = $(window).height()/2;
    $('.collection-item-2').each(function(index){
        if( $('.collection-item-2').eq(index).offset().top - $(window).scrollTop() < -height){
               $('.collection-item').eq(index).css({ 'transform' : 'scale(1.1)','opacity': 0});
        }  else {
               $('.collection-item').eq(index).css({ 'transform' : 'scale(1)','opacity': 1});
        }  
    })
})

[bensilvertown]

This is awesome! Works perfectly thanks Denny

[dennyhartanto]

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

[johncarosella]

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-collection text [Find this under Song List Palatte->song title list line]. So I have all the div blocks laid out for the triggers, but there’s only one instance of the target collection "layout’, so how do I target an item (well, record, really) within in the collection for display?

Here’s my project for Bay of Pigs/Pleasant Grove Rock Opera