Jump to content
Search Community

Animate background colors for each section on scroll

AraAbc test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts


I have this prototype I am working on that I forked from another forum post and tweaked a bit. What I can't seem to figure out is how to make it so the background color animates to a new one for each section. 


I have a "data-color" attribute on each ".Demo-section" so ideally it would use that value for each section.


Basically I'd like it to start with #fff.

Animate from #fff to #ddd when second Demo-section comes in

Animate from #ddd to #999 when third Demo-section comes in


Any help/guidance would be very much appreciated. 🙏 



See the Pen 89de500680b3386bbf9c184b627616a7 by itsMeAra (@itsMeAra) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @AraAbc :)


Welcome to the forum.


If I understand your goal correctly, I think it's just a matter of animating the background-color of the parent #Demo section. Something like this.


See the Pen RwxbvjN by PointC (@PointC) on CodePen


Hopefully that helps. Just FYI - it's better to make your pens public when you post here so they can easily be forked with changes.


Happy tweening and welcome aboard.



  • Like 3
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...