GSAP Sticky section on scroll change image according to active content using ScrollTrigger

[AB Belal]

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?

See the Pen ExGVQLe by ab_belal (@ab_belal) on CodePen

[mvaneijgen]

Hi @AB Belal welcome to the forum!

 

What I've done is create a new ScrollTrigger that pins everything in .recommended-by if the triggers are met.

 

See the Pen ZEVOzdy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've got this logic from the following pen. As you can see this pen has a really different structure how it handles all the animations, what you're doing is using a mix of CSS and GSAP to animate your elements, which I would not recommend, it is much easer if you let  GSAP handle all the animation and do it like the pen below have a timeline that you let ScrollTrigger control.

 

See the Pen gOeMJOV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Even easier would be to have one big timeline that does all the animations and let one ScrollTrigger control that timeline. Lots of people make the mistake when starting out to focus on ScrollTrigger, but all ScrollTrigger does is animate something on scroll, so if you focus on the animation at first this will be much easier. A great example is this video from the Greensock YouTube channel, where multiple cards get animated, but just one ScrollTrigger is being used. 

 

 

It is up to you which route you want to go, nothing is wrong, that is the beauty of GSAP you can build in any which way you want, but for the current setup it is a bit over complicated in my option. Hope it helps and happy tweening! 

 

Side note: I see you doing some media queries in JS, have you seen https://greensock.com/docs/v3/GSAP/gsap.matchMedia() it has some great features that work great with GSAP!

[AB Belal]

Thank you @mvaneijgen I will try your solution.