How to stop Conditional Animation when it no longer meets the condition

[theKVD]

What I'm doing

I've got a music player that I've loaded 2 albums into.  Each Info Wrapper has a fixed width of 20ch.  Some Song Titles, and one Album Title, are longer than 20ch.  I created a stepped animation to scroll the overflow text back and forth every few seconds in the style of a Car Head Unit. 

 

That animation is set to only fire off when the information in the div is longer than 20 ch and it works like a charm.  If you click forward to Track 6 on the initial album or forward to the 2nd album you'll see it fire no problem.  Only problem is it's running forever.

 

The innerText is being changed by the loadSong() function which is called every time there's a song change.  That loadSong() function has the if else statement in it.

 

What I need

The timeline to fire if the target is over 20ch and stop and revert to 0 if the target is 20ch or under.  

 

What I've tried

• running the if else in the overflowScroll() function, then calling it every time loadSong() fires.
• running the if else only in the loadSong() function.
  • new timeline that sets x: 0 on the target with no delay.  This puts the text back, but then the original animation keeps running.
  • kill() and killAllTweens() in the else of an if else statement.  I got no change in results at all.

 

Side Note

Even though there's only one line, I'm using timelines and not tweens.  My plan is to build on this animation once I get past this hurdle.  I'm sure that this is me being a novice to GSAP and staring at this code for hours making my brain mush.  So I'm flying the white flag of war and asking for help.  Thx in advance!

 

Side Side Note

Yeah, I know it's not responsive so it looks lame in the preview.  I'll take care of that later ?  Don't judge me.

See the Pen yLGVMvj by thekvd (@thekvd) on CodePen

[GreenSock]

Welcome to the forums, @theKVD.

 

Here's one approach: 

See the Pen PoXWypj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You just needed a way to keep track of that timeline instance so you could revert() it. Right? 

[theKVD]

That is a testament to getting a second set of eyes on a thing being the right call!  I didn't even think to see if it was running as a conditional even though it was right there in my question.

 

Jack, you are a Superhero indeed.  Thank you for that!

 

Now to fork and continue on.