Jump to content


Need to animate and fix a heading and change color. Help wanted

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'm totally new to Greensock. This is what I want to make:


  • Fix a title in a website as long as it is in the viewport. It starts on a background image and needs to be white.
  • As the visitor scrolls the title must be fixed until the point it reaches a certain offset.
  • The title smoothly needs to change it's color from white to dark blue along the scrolling animation. 


Anyone any snippets or links? Don't know where to start (quickly). Is Tweenlite the best option?




Link to comment
Share on other sites

I'm not following the description entirely. If the title is fixed when it is in view, how can its position or offset be changed as the user scrolls?


Regardless, it sounds like you need a fair amount of logic to determine and control placement of objects while the user is scrolling. 


When it comes to GSAP its important to remember that its primary function is that of an animation engine. Animating the color from white to blue is possible and as simple as:


TweenLite.to("#someTitle", 1, {color:"blue"});


If you want GSAP animations to be triggered by scrolling and you don't want to write your own code to handle that, most people use ScrollMagic

ScrollMagic allows you "pin" elements which sounds like what you want to do with having them "fixed". 


For more tutorials on ScrollMagic, Petr Tichy has some free and advanced courses: https://ihatetomatoes.net/scrollmagic-tutorials-for-complete-beginners/?ref=5





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