jzhang172

Thanks, I took your suggestion and actually made it work! Something that I noticed while debugging my code is that if I have my tween variable after my Scrollmagic scene, it starts automatically, but if it's before my scrollmagic Scene, it starts as intended.

Sorry, to be more clear, I have two Tweens. The first one: .setTween(leftBarBold, .5,{className: "+=active-me", onComplete:jason}) will execute (it adds a class "active-me" when scrolled into specified view and removes the class when out of the view), this is correct intended behavior. and the second Tween: TweenLite.set(leftBar, {className: "+=active-me"}); executes a second Tween by adding a class on a different element. Issue: However, my issue is that my second tween (while it adds the tween), it does not remove the class when scrolled out of view unlike the first Tween.

$(function(){ var controller = new ScrollMagic.Controller(); var leftBarBold = $('.left-bar-bold'); var leftBar = $('.left-bar'); var scene = new ScrollMagic.Scene({triggerElement: '.big-word',offset: -150}) .setTween(leftBarBold, .5,{className: "+=active-me", onComplete:jason}) function jason(){ TweenLite.set(leftBar, {className: "+=active-me"}); } I'm having trouble running my Tween. The first bit works fine, but when it comes into my function jason(), I want the className to be removed after leaving that part of the page. The first Tween correctly removes it, but I'm not sure why the second tween doesn't.