Jump to content


Sequentially executing multiple scrollTriggers on a page

Recommended Posts

Hi! Please help me to solve problem with my scrollTrigger animation.
I need to change body background color on page scroll event.  

Also i have a pinned section.advantages with another horizontal scrollTrigger inside. 


The problem is that the animation of changing the background color does not stop when section.advantages is pinned. I need to continue color animation only after i go to the end of advantages slider.

Codepen demo 

See the Pen vYjjdYP by 1simonianartur1 (@1simonianartur1) on CodePen

Link to comment
Share on other sites

Hi @ArturSimonyan and welcome to the GreenSock forums!


The issue is that you're creating the ScrollTrigger instance before creating the ScrollTrigger instances for the slides that are pinned. Pinned ST instances add some padding to the bottom to accommodate the amount of pixels that the content will pinned. So when you create the instance for the background color, that extra space is not there and then you create the slides ScrollTrigger and that space is added, but the body color-change instance doesn't know about it.


I can think of two options. One store the body color-change ScrollTrigger instance in a variable and call the refresh method on it after creating slides scroll trigger or, Two simple create it after creating the slides scroll trigger:

Option One:

let bodyColorSt;

function set_page_visual_on_scroll() {
  const sections = document.querySelectorAll('.section');
  bodyColorSt = gsap.utils.toArray('.section').forEach(/*...*/);

function animate_advantages_section() {
  const advantages_el = document.querySelector('.advantages');
  const slider_el = document.querySelector('.advantages .slider');

Option Two: 

document.addEventListener('DOMContentLoaded', function () {
    set_page_visual_on_scroll(); // <- Create it after

I would try the first approach since it would execute in the same order when the ST instances are refreshed in case of a screen resize, otherwise you'll have to tinker with the refreshPriority configuration and run the sort method so each instance is refreshed in the order they should.


This example uses the second approach:

See the Pen LYmmrzq by GreenSock (@GreenSock) on CodePen


Happy Tweening!

Link to comment
Share on other sites

Thanks a lot! Absolutely what i need

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.