Start animation of background after a pinned element only when in view.

[vicsalf]

The background of the `body` is updated when each section enters the viewport (due to a data attribute).

A timeline is created for the second section (orange) that moves a box horizontally for `1000px` and once finished the section is unpinned.

 

On scroll,  even though the second section is pinned the background color changes to the third section value (3 - yellow) even though visually speaking the third section "is not in the viewport' since the second section is pinned.

 

Note: added an animation of the box on the third container. The expectation would be that the background change triggers at the same time as the box is animating, meaning when the third section comes into view.

 

How can the background color associated to the third box be triggered only when it is visible?

See the Pen EaYPpww by vicsalf (@vicsalf) on CodePen.

[mvaneijgen]

Hi @vicsalf welcome to the forum!

 

You should create the ScrollTriggers in the order they appear on the page especially if you pin things. The later ScrollTriggers then need to know by how much they need to offset their start position based on the pinned sections. If you can't create the ScrollTriggers in order you have to use refreshPriority seethe docs for more info  https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#refreshPriority

 

I've also enabled markers for all your ScrollTriggers so that you can visually see what is going on, this really helps with debugging ScrollTrigger animations. When the start markers touch the ScrollTrigger starts and then when end markers touch the animation is finished. 

 

In the below pen I've created the ScrollTrigger animations for the sections below the pinned sections, which seems to solve your issue. Hope it helps and happy tweening! 

 

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

[vicsalf]

Thank you @mvaneijgen, this is what I needed. I will go through the docs a few more times and grasp the concept of "order" better.

 

On a side note, I tried using a solution outside gsap (intersection observer api) but it open another can of works. So I will be implementing the update you suggested.