Second scrollTrigger unsmooth transition

[ElDedo]

Hey!

I got a Section on a homepage where background colours are changing by scrolling.

 

The first transition is working fine, but with the second scrollTrigger it´s just changing without any transition.

 

Why does this happen?

 

Here´s the live site link: https://fairnergy.webkonditorei.de/     --> It´s about the 4th section where the text is sticky on the left and cards are moving up on the right.

 

Here´s the GSAP i wrote for animating the elements:

   

 /* First Trigger */
    
    gsap.to('#partners', {
        scrollTrigger: {
     trigger: '#trigger-color',
     toggleActions: 'play none none reverse',
   },
        background: "#6B6B6B",
        ease: "power4.inOut",

    });
    
    
    
      gsap.to('.toggle-text', {
        scrollTrigger: {
     trigger: '#trigger-color',
     toggleActions: 'play none none reverse',
   },
        color: "#F6F6F6",
        ease: "power4.inOut",

    });
    
    
      gsap.to('.partner-box', {
        scrollTrigger: {
     trigger: '#trigger-color',
     toggleActions: 'play none none reverse',
   },
        background: "#505050",
        duration: 1,
        

    });
    
    
    
    /* Second Trigger */
    
    
     gsap.to('#partners', {
        scrollTrigger: {
     trigger: '#trigger-color1',
     toggleActions: 'play none none reverse',
   },
        background: "white",
        ease: "power4.inOut",

    });
    
    
    
    
    
          gsap.to('.toggle-text', {
        scrollTrigger: {
     trigger: '#trigger-color1',
     toggleActions: 'play none none reverse',
   },
        color: "#E29863",
        

    });
    
    
     
    
         gsap.to('.partner-box', {
        scrollTrigger: {
     trigger: '#trigger-color1',
     toggleActions: 'play none none reverse',
   },
        background: "#F9E8DC",
        duration: 1,
        

    });

    

 

[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/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

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

[mvaneijgen]

The property `background` is a short hand for a lot of background properties in CSS https://developer.mozilla.org/en-US/docs/Web/CSS/background

 

You only want to animate `background-color`, so try animating `backgroundColor` instead and see if that works. Other wise I would love a minimal demo, so that we can tweak your code, because that is impossible on a live site and makes it harder for us to help you. 

[ElDedo]

Thanks for your answers!

 

Here I created a little Demo. Also when scrolling back up it´s not working the way it´s working by scrolling down (different timing)

 

See the Pen rNJgKeK by webkonditorei (@webkonditorei) on CodePen

 

 

[mvaneijgen]

I would camel case css properties within GSAP, so  `background-color`, becomes `backgroundColor`. 

 

I see you are making multiple ScrollTriggers to animate multiple elements. You can animate multiple elements with a `timeline` and then add a ScrollTrigger to a timeline to animate the elements one by one or change the position parameter to have all the elements animate at the same time, seen in the demo below. 

 

I've enabled the markers in ScrollTrigger to better illustrate what is happing when certain elements are triggered

 

See the Pen MWQdBON?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

[ElDedo]

Thanks for the Solution.

 

This is indeed a much smoother solution and the way you did this with the timline is a way smarter approach. Will go for this now more often!