Das123

Thanks again for your help with this. For completion I've fiddled a bit more with the code-pen to get what works for me... https://codepen.io/Das246/pen/KKeKGBL The changes are: Turn back on the scrollTrigger so the scrubber still does its job. Get rid of the text at the top of the right column to ensure the elements line up at the bottom. Add an expo ease to minimise the animation between elements so there is minimal fade in and out. (There probably would have been a better way of doing this.) Used the new .card-last class to set the height rather than the :last-child selector.

Thanks again @mvaneijgen. You're right, I only need the last child. I've coded that and it works well. https://codepen.io/Das246/pen/KKeKPWY I also needed the elements to step through clearly rather than meld across and so I changed the timing variable. I am still struggling a a couple of issues - but it is really close. 1. When you look at the example the elements behind stay on the screen even when the front element is strong. I don't really understand how 'stagger' works so am hoping that can be solved easily. 2. I need the first .card to be visible before the animation starts and the last .card to be left visible after the animation ends. In my head I was thinking I would need to ditch the stagger aspect and have a trigger that toggles a .active class with opacity 1 but this seems like it would be a start again exercise.

Wow! Thank you @mvaneijgen! That certainly moves me a long way along the track. Also, thank you for spending the time to explain the principles and approaches behind the techniques - very very valuable. I'll have another attempt but one issue I think I will have is that I don't know in advance the depth of the card elements and I can't have them extend into the subsequent sections. position: sticky for an individual element works great but not when you have these position: absolute elements.

Hello. I've been struggling with this for days. As you will be able to see, I'm not very good at javascript code - sorry. I actually thought the use-requirement would be fairly common but can't find any examples. Currently my CodePen doesn't work at all. If I remove the t1.from(flipper.querySelectorAll('.card'), { opacity: .6; }); code it will display the markers and sort of moves the boxes down the page but still doesn't do anything else. What I'm trying to do is: have multiple sections that trigger their own content animations. have the left hand side (.big) work as the scroller to define the start and end. Probably don't really need this if I can sticky the elements in the right hand panel. have any number of divs in the right hand column that optically replace each other as you scroll down the page. For example, if there are 2 elements they will replace at 50%. If 3 it will be at 33% and 66%. Etc. need the .holder element to be sticky inside its parent div. may need a way to define the height of .holder based on the tallest .card element. In the CodePen I've dummied up my basic issue. Really hope someone can help shed some light on what I've been doing wrong. Thanks in advance. I've used different opacities here so I can hopefully see what is going on rather than opacity 0 and 1. In the final version I would need to start with the first .card element at full opacity and then hid as the others come online.