Animating Several Radial Gradient Backgrounds

[BattN]

Hi! This is a continuation of this post:

I'm having trouble transitioning from one section to another past the first section. It seems that making the initial '.bg' background fixed is causing issue with smoothly transitioning past the first section. As you can see, when scrolled to the '#writings' section, it goes back to the '.bg' background before transitioning.

 

I tried to make the trigger '#about' before leading into '#writings' but it left my with a weird filter gradient that gets triggered when scrolled to '#writings' but only appears in the '#about' section.

See the Pen xxeraZr by duh-doi (@duh-doi) on CodePen

[mvaneijgen]

GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. 

 

You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! 

 

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

[BattN]

Thank you so much @mvaneijgen! This helps tremendously 😄