ScrollMagic and Tweening a Sequence

[jzhang172]

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

[PointC]

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.

[jzhang172]

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.

[PointC]

o.k. I think I understand what you're asking now - thanks for the clarification. 

 

I assume you're talking about ScrollMagic reversing the tween when you scroll back up the page, correct? If that's the case, the onComplete is not going to get called when the tween reverses. You'll need to call another function onReverseComplete that removes the class on leftBar. 

 

My two cents worth: I'd probably put both of those tweens on a timeline so you wouldn't need the callbacks.

 

If that doesn't answer your question, could you please provide a demo so we can see the code? Here's some info about that:

Happy tweening.

[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.

[PointC]

I'm glad to hear it's working correctly now.

 

Yes - you are correct - you definitely want to create your tweens and timelines before the ScrollMagic scene otherwise it won't be able to take control of them. Happy tweening.