Highlight items while scrolling through list.

[Nelis]

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

[Jonathan]

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() ..

 

http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween

 

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.