Change Section Background Color Dynamically

[DevNate 0 Likes (Newbie)]

I am trying to recreate this smooth background color change effect on Reactjs. I still cant tell where i am getting it all wrong. 

 

See the Pen RwRebNY by cameronknight (@cameronknight) on CodePen

 

PS:I am new to using codepen, still cant figure out why my component is not rendering...

See the Pen yLEKvvm by NateIO (@NateIO) on CodePen

[Rodrigo 5,097 Likes (Superhero)]

Hi,

 

Here is a port of your example in Stackblitz:

https://stackblitz.com/edit/react-zwvplu?file=src%2FApp.js

 

I made some corrections to a few things. Data attributes in react should always be lowercase, avoid camel casing them. Also you don't need to look for the data-something attribute in your elements, just use element.dataset.bgcolor and it works.

 

Let us know if you have more questions.

 

Happy Tweening!

[DevNate 0 Likes (Newbie)]

thanks a bunch

 

[DevNate 0 Likes (Newbie)]

21 hours ago, Rodrigo said:

Hi,

 

Here is a port of your example in Stackblitz:

https://stackblitz.com/edit/react-zwvplu?file=src%2FApp.js

 

I made some corrections to a few things. Data attributes in react should always be lowercase, avoid camel casing them. Also you don't need to look for the data-something attribute in your elements, just use element.dataset.bgcolor and it works.

 

Let us know if you have more questions.

 

Happy Tweening!

Thanks alot, really appreciate your feedback. But i cant still achieve that smooth backgroundColor transition

 

21 hours ago, Rodrigo said:

Hi,

 

Here is a port of your example in Stackblitz:

https://stackblitz.com/edit/react-zwvplu?file=src%2FApp.js

 

I made some corrections to a few things. Data attributes in react should always be lowercase, avoid camel casing them. Also you don't need to look for the data-something attribute in your elements, just use element.dataset.bgcolor and it works.

 

Let us know if you have more questions.

 

Happy Tweening!

Thank you so much, i really appreciate your feedback. I am trying to get the smooth backgroundColor change transition effect as seen 

See the Pen RwRebNY by cameronknight (@cameronknight) on CodePen

[GreenSock 18,293 Likes (Superhero)]

I'm not entirely sure how you want it to work, but it may be as simple as: 

ScrollTrigger.create({
  trigger: el,
  start: 'top 50%',
  end: (self) => '+=' + el.offsetHeight,
  onToggle: (self) => {
    if (self.isActive) {
      gsap.to('body', {
        backgroundColor: color || 'transparent',
        duration: 0.6,
        overwrite: 'auto',
      });
    }
  },
});

The way it was set up in Rodrigo's demo made the ScrollTriggers overlap which would cause the tweens to fight with each other during the overlaps.