Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Highlight items while scrolling through list.

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

Greetings everyone. I'm attempting to highlight items in a list while the list it is being scrolled by the browsers scrollbar using ScrollMagic and GSAP. I sort of got them working individually but am unable to combine the two animations. I've setup a code pen in hopes that someone might give me a little direction. Thanks.


Note: Ended up using gradient overlay for similar effect. Sorry for including ScrollMagic in my post. Any future posts will be in regards to GSAP specifically.

See the Pen qaEgKb by Nelis (@Nelis) on CodePen

Link to comment
Share on other sites

Hello Nelis, and Welcome to the GreenSock forum!

Thank you for the example, very helpful ..  I am not familiar with ScrollMagic since it is made with GSAP, but it is not made by GSAP.


But from what i can tell in the ScrollMagic GSAP Plugin API .. setTween() ..





  • first parameter - TweenObject: A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples).

So It can accept tween or a timeline.. If you have both your animation tweens in a timeline, and then you can pass setTween().


But i only see one tween reference in your codepen called scroll. If scroll will have more tweens then you should use a a timeline like a TimelineLite or TimelineMax instance.


But others might be able to help you better who are more familiar with ScrollMagic. since it is a thrird party plugin not made by GSAP.


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.