Jump to content
Search Community

Change Section Background Color Dynamically

DevNate test
Moderator Tag

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Thanks 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.
×
×
  • Create New...