Having a column sticky for a moment while the other one is scrolling

Hello,

I would like to reproduce a cool animation effect I saw on several website. (I dont know if its ok to share the link of a website so I will try to explain with words and my public share link)

On my project, you can see a container named “container personnages historiques”, maded of two columns, with in the first one a grid with a multiples images and on the second one a list of names.
When I scroll, I would like the first column to stop until the second one is not finish to reach.
Basically, it creates an effect of all the images stop moving while the list of the names are still displaying while scrolling.

I dont know if Im clear.

I’m not asking necessarily someone to do that for me, but any tips how to do it would be helpful considering I have been trigering my brain trying to already.


Here is my public share link: LINK

Hey Reginald!

It’s definitely a super cool effect and should be pretty easy to replicate! If you set the item you’d like to ‘stop’ scrolling, in this case it sounds like the images, set the position of the element to sticky with the top value at 0 and make sure the parent element is set to position relative.

Let me know if that works for you! :slight_smile:

1 Like

Hey @Sam_Schwinghamer1

It completly worked.
I didn’t know what to type on the internet to make this effect.
Thank you very much and have a good day ! :grinning:

Hi @Sam_Schwinghamer1 @Reginald_LeDuke , I’m having the same problem and still can’t fix it. Could you please help me out? here’s the link to my topics Make one column sticky and one column scrollable