horizontal scroll Horizontal pin scroll

[Sukru]

Hello, I made a horizontal scroll animation, but I wanted it to be like the example here "https://www.brooklyneditions.com". With the scroll, the left atrium remains fixed, the content belonging to each scroll remains and the next one comes. Can you help me?

 

See the Pen rNPrXvK by sukruemanet (@sukruemanet) on CodePen

[mvaneijgen]

My advies remove ScrollTrigger and restructure your layout. You want them to stack with an offset, so build that first. If you've got that with CSS all you need to do is move the sections one by one with GSAP, .from() some position to the place you've put them with CSS. Keep in mind that each section is the windows width - the offset of all the previous sections, right now all your sections are 100% of the window width, this will not work for the effect you're doing for. 

 

Before you start thinking about animating you first have to fix your layout and before you start to think about ScrollTrigger, you first have to have a working animation, there are no shortcuts here. Hope it helps and happy tweening!