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

[Teun87]

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?

 

Regards,

Teun

[Carl]

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

 

.