Target individual collection item for interactions? 🤔

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 :slight_smile:
Live stage site here: LINK
Public share link below :point_down:


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

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.

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

@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 custom-0 which works on the placeholders but not the collection items.

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.

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.

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 at 03.27.33

$(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});
        }  
    })
})
1 Like

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.

1 Like