[ScrollMagic and Tweening a Sequence]

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.

[ScrollMagic and Tweening a Sequence]

1 hour ago, PointC said:

HI @jzhang172

 

Welcome to the forum.

 

You said the jason() function should remove that class? Your function is currently adding it again. To remove it you'd need:

TweenLite.set(leftBar, {className: "-=active-me"}); 

 

Hopefully that helps. Happy tweening.

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.

[ScrollMagic and Tweening a Sequence]

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