Jump to content


Basic Logic & Syntax Question

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi All,


I'm relearning coding after about a 6 year absence (in which I forgot everything I knew). My question is pretty straightforward and I was really hoping I could get some assistance...


1. I have a background div that takes up most of the viewing area.

2. I have a vertical row of nav buttons on the left side of the screen.

3. I want to change (animate) the color of the large background div when you click one of the nav buttons. 


So far I've been able to create everything except the logic that says which button sends what color to the div. I don't understand how to send a parameter to a button click that will trigger a different background color (tweening into place).


I would hugely appreciate any assistance. Thanks in advance. 

Link to comment
Share on other sites

Hi LikeableLich  :)


Welcome to the GreenSock forum.


There would be a number of ways to make that happen. You could add a data-attribute to the buttons with a color value and grab that on a click() event. You could also add the colors to an array and based on the index of the button being clicked, grab the new color value for tweening.


Here's a super simple example using a data attribute:

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


I used an array in the following pen. I'm also setting the color rather than tweening it, but you get the idea. (Line 37 is the color change function)

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


If you have other GSAP related questions while experimenting, please let us know. We're happy to help. A CodePen is the best way to get great answers.




Happy tweening and welcome aboard.


  • Like 3
Link to comment
Share on other sites

Great demos, Craig  :mrgreen:

  • Like 1
Link to comment
Share on other sites

Thanks, Craig! I think I'm looking for the best solution that takes into consideration that there will be other elements (divs) that will animate in/out on top of each colored background (section), when you click a nav button. In light of this, which one of the above approaches would you think is most conducive? 

Link to comment
Share on other sites

I personally prefer having the colors in an array. That keeps my list of colors, my button functions etc. together in my JavaScript. I find that easier than going back into the HTML and changing attributes on the individual buttons if I want new colors.


That being said, it's really up to you. I'd say whatever makes the most sense to you especially since you're just getting back into coding.


Happy tweening.


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