Scroll trigger issue

[akshitarora]

Hi Everyone, I am very new to GSAP. I am trying to achieve a animation flow but stuck on step 3 ie. to move the mid box to the left. Any help will be appreciated.
 

See the Pen oNQqNMY by Akshit_arora (@Akshit_arora) on CodePen

[akapowl]

 

Welcome to the GreenSock forums, @akshitarora.

You are making one of the most common ScrollTrigger mistakes here; nesting ScrollTriggers inside multiple timeline tweens.

 

When using timelines, the only place a scrollTrigger is supposed to go, is on the timeline object itself.

If you want/need to define different start/end points for when to trigger something, you can create multiple ScrollTrigger instances instead.

In this fork of your example I have set up

• one single tween with a ScrollTrigger attached for the gap-animation
• one single ScrollTrigger instance that only pins the box for a certain amount of scroll-distance
• and one timeline with a ScrollTrigger attached, that starts at the same time the .previous() ST does plus the box's height tp prevent overlapping of the boxes while scrolling - This timeline contains two tweens with different durations to determine their 'length' during the whole scroll-amount of the scroll-trigger. One tweens the box to the left for 80% of the timeline's scrollTrigger's scroll-amount and after that one fades in the headline in the next section for 20% of that scroll-amount. You can read more about how durations work on scrubbing scrollTriggered tweens here.

 

[Edit: I also made some changes in CSS to make this a bit more consistant over multiple screen sizes]

 

Try yourself on implementing the rest of your animation flow after reading through all the information I've linked above - if you get stuck let us know.

 

See the Pen rNQdVVY by akapowl (@akapowl) on CodePen