Scrolltrigger: Add index to timeline inside onEnter function

[Gigi1303]

Hi guys, I know this question will sound trivial to you but I'm basically stuck here. I'm not able to attach a codepen but I'll try to make the question as easy as possible.

Basically, I have a foreach loop for pinning every section of my website, and that works very well. In addition to that I have 3 different timelines to change the body background (if you look at the example below)

let backgroundChange0 = gsap.timeline({paused:true});
backgroundChange0.to('body', {backgroundColor: '#fffce4'});

let backgroundChange1 = gsap.timeline({paused:true});
backgroundChange1.to('body', {backgroundColor: '#FFDD00'});

let backgroundChange2 = gsap.timeline({paused:true});
backgroundChange2.to('body', {backgroundColor: '#000'});

gsap.utils.toArray(".dds-panel").forEach((panel, i) => {

let mainTl = gsap.timeline({
    scrollTrigger: {
    trigger: panel,
    onEnter: () => backgroundChange[i].play(),
    onLeaveBack: () => backgroundChange[i].reverse(),
    start: "center center", 
    pin: true, 
    pinSpacing: true,
    toggleActions: "play none reverse none",
    invalidateOnRefresh: true
    }
});

}

I know this looks messy but I have to change the background color to different ones before pinning the section panel. The problem is that I can't make that backgroundChange[i] work inside onEnter, I even tried passing it as a string like ("backgroundChange" + i) but it doesn't work.

My goal is to use the forEach index to dinamically change to backgroundChange0, backgroundChange1, etc. inside the onenter and onleaveback event.

Thanks a lot for your help, let me know if it's clear, otherwise I will try to make a codepen with minimal coding.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Gigi1303]

Thanks a lot @GSAP Helper. I made a simplified pen of what I wanted to achieve, here it is:

See the Pen ExpXELE by luigi-basile (@luigi-basile) on CodePen

Let me know if that helps.

[Rodrigo]

Hi,

 

Maybe you could get some inspiration by this video and example by @Carl

 

See the Pen KKvQOKY by snorkltv (@snorkltv) on CodePen

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

Here's an approach you could take (if I understand your goal correctly): 

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

 

Enjoy!

[Gigi1303]

Thanks a lot for your inputs! I'll make some test and report you back, I like both solutions. The second one has the advantage of having the bg color as a data attribute which is very nice.

Thanks again @GreenSock and @Rodrigo

[Gigi1303]

Made some test, works good but i'd like to ask you some more questions:

- Is it possibile to make the bgcolor animation start earlier, without changing  the scrolltrigger start value? That's because that value works good for the pinning.

- When you scroll back, I'd like to make the background change as soon as possibile, ideally before the text starts appearing onscreen. Is it possibile without changing the scrolltrigger start value here too?

- Last question: can we make that the bgColor reverts to the previous section data-panel-bg attribute instead of setting an initial body Bg value?

The Greensock codepen is still valid for these last request:

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

[GreenSock]

You can't use only one ScrollTrigger and have it trigger pinning at one time and the animation at a completely different point. But you can very easily just create a separate ScrollTrigger for the animation(s) so they trigger earlier/later (like 100px earlier in this example): 

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

 

I hope that gets you moving in the right direction. 

[Gigi1303]

Very interesting @GreenSock. I don't know why but I thought that using the same trigger for two different Scrolltriggers wasn't good practice.

Thanks a lot.