AB Belal

Thank you @mvaneijgen I will try your solution.

Hello everyone, Hope you all are doing good. I need some assistance on the GSAP scroll trigger. I have a section like this https://prnt.sc/KSmvaP4g6Mdk My requirements and some screenshots are given below: When scrolling down: 1. As the user scrolls, the section becomes sticky, limited to the top portion shown in the screenshot. https://prnt.sc/i6ZtbL_a_5_G 2. Initially, the first content on the left side becomes active, and the right side image matches the first content's image. like this https://prnt.sc/rrkB5EFo6W91 3. When scrolling further, the second content on the left becomes active, and the right side image changes to match the second content's image. 4. This pattern continues, with the third content becoming active, and then the section stops being sticky, allowing the user to move to the next section. When scrolling up: 1. The sticky section reappears at the top, containing the third content on the left, and the right side image matching the third content's image. 2. Scrolling up again activates the second content on the left, changing the right side image accordingly. 3. Similarly, scrolling further up activates the first content on the left, and the right side image updates to match. 4. After the first content is active, the sticky section is no longer sticky, and the user can continue scrolling to the previous section. I have implemented it a little bit in Codepen (link here). But I tried to make it sticky and exactly my requirement. How can I achieve this?