Jump to content


Possible to tween through multiple colors using TimelineMax?

Moderator Tag

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

I'd like to tween a CSS value, say a div background color, through multiple colors based on scroll position -- as if I could set up a gradient of colors (for instance a spectrum/rainbow).  My thought was to set up tweens on a TimelineMax and  then check on each scroll update as to percentage scrolled and seek to that percentage position on the TLM.


I can do the grunt work, but I'm curious to know whether using TLM in this way would even be possible -- any help appreciated --

Link to comment
Share on other sites



Definitely you can use either TimelineLite/Max to do this. Just set up the instances with the colors you want to tween and then, based on scroll position, you can update the Timeline's progress. Similar to how Scroll Magic (the evolution of Superscrollorama) work:




Also if you don't want to add a plugin you can take a look at this tutorial:





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.