Jump to content
GreenSock

AraAbc

Animate background colors for each section on scroll

Go to solution Solved by PointC,

Recommended Posts

Hello!

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

@PointC omg thank you! Exactly what I wanted. Also can't believe that didn't even cross my mind lol 🤦‍♂️ it's been a long week 😂

 

Will make sure my pens are public next time, sorry about that! Thank you so much!

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