Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Creek

Killing Endless Repeats?

Go to solution Solved by GreenSock,

Recommended Posts

I've got nested animations with endlessly repeating loops and all of those nested infinite repeats eventually need to stop. Not on clicking - most stuff I've seen has to do with clicking - just when it reaches a certain point in the master timeline. A very literal "screen goes black" moment - and then the master timeline should continue on again, only with the previous stuff no longer infinitely animating? I even did the black screen bit HOPING it then wouldn't be too complicated? Black screen. Dead. But maybe that's why a kill is the wrong thing - it would kill its own timeline? I have no idea - it just came up in searching for ending infinite repeats?

Link to comment
Share on other sites

  • Creek changed the title to Killing Endless Repeats?

@Creek it would be super helpful if you kept your questions very succinct and provided a minimal demo - that'll significantly increase your chances of getting answers around here :)

 

You don't need to put everything into a master timeline - only do that if it makes sense. In the description you gave (which I may be misunderstanding), it seems like you could have that infinitely repeating animation in a separate timeline that you then kill()/pause() or animate the timeScale() to 0 (to gradually slow it down) whenever you want.

 

Good luck. 👍

Link to comment
Share on other sites

I don't understand what's going wrong well enough to isolate the problem to a demo?

 

.add(() => gsap.to(nestedAni, {kill()}) // Did not work
.add(() => gsap.to(nestedAni, kill()) // Javascript error
.add(() => gsap.to(nestedAni, {kill}) // Timeline never started
nestedAni.kill({"repeat:true"}) // Halted master timeline wo ending nested repeat
nestedAni.killAll() // Same - halted master timeline wo ending nested repeat

And, as the following is probably the same basic issue - not understanding how to code it correctly? Wrong format?

 

.add(nestedTL(myVar), "+=.5")
.play("Ending") // just ignored - bc it doesn't exist yet I guess? 
.addLabel("startLoop")
.add(nestedTL(myVar2), "+=.5")
.add(nestedTL(myVar3), "+=.5")
.play("startLoop") // plays immediately, all .add before ignored
.addLabel("Ending")
.add(nestedTL(myVar2), "+=.5")

I promised that I have taken at least 3 different intro to javascript courses - following along one with the coding, took me a few days.

 

But none of them seem to explain HOW I apply some of what I read even in the docs here? Basically, either the docs provide a very basic introductory level javascript example - or I have NO IDEA how to apply it? Again, I've tried to learn the basics? 

 

Oh, and just tossing it out there - in my defense, I have managed to follow along to the point that I have been able to create a fairly lengthy animation. But... then I run into these snags as I'm "tweaking" and I'm just absolutely lost?

 

But I must be missing something HUGE? Some VERY BASIC premise that I've got wrong or backwards? I'm using functions because I'm applying the same animation with different variables. And that part works.

 

Is there a recommended intermediate javascript course that covers everything I actually need to know to at least follow along?

 

I know I keep saying "thanks for your patience" as though it's an excuse - but I honestly don't know where to go? There's only "basic javascript" and then the 60+ hour courses on javascript? I wish I just knew what it is I didn't know - so I could specifically go and learn just that? Advanced javascript for GSAP? I'd hit up 60 hours for that? Then I could go back and review the bit on calling nested timelines as functions when I got mixed up?

 

But most javascript courses? Ends up being the teacher going on about managing shopping carts for probably 59 of the 60 hours? ;) And now... the advanced lesson on how to automatically create new shopping cart items from the SQL database. Oh... well please take our advanced course on SQL databases - 50% off with your code "NOITNEVERENDS" ;) That bit you actually NEED for GSAP? Well that's special hidden content in our Super Advanced Javascript for Javascripters who Script Jovially but not for Java 'cuz Java is a Different Language Entirely and We Always Repeat That in ALL Javascript Courses Because Otherwise You'd Be Even More Confused Part 3 of 7, in the Bonus Extra Content Additions Addendum only available to Super Elite Lifetime Founder Members from Mars.

Link to comment
Share on other sites

  • Solution

Question: "how do I kill a timeline stored in a variable named nestedAni?"

Answer

nestedAni.kill();

Or in your context (adding a callback into a parent timeline):

.add(() => nestedAni.kill())

 

In JavaScript, there are basically objects that have properties and methods. That's all GSAP is - an object with properties and methods. Methods are just functions attached to an object. 

 

object.property
object.method();

So if you're trying to apply an action to a particular object, that object probably has a method for that:

nestedAni.kill();
nestedAni.pause();
nestedAni.play();
...etc.

But yeah, most of your questions seem to boil down to basic JavaScript and syntax stuff. Don't feel bad, though - at some point a light bulb will go on and a bunch of stuff will suddenly make sense. 

 

But again, please keep your posts as succinct. A minimal demo, even if it's totally broken, goes a LONG way to getting you an accurate answer.

 

2 hours ago, Creek said:

I don't understand what's going wrong well enough to isolate the problem to a demo?

 The best thing to do is literally just start with a single <div> and try one animation or if you're working with something nested, just do ONE level deep, ONE thing. If it works, great, add a small layer of complexity one-by-one until it breaks. That's the best troubleshooting advice I can give anyone, including advanced developers. It's the same thing I do when I'm bug hunting. Isolate, isolate, isolate. Do NOT try to take a huge project where you've got 100+ lines of code and try to slap that all into a CodePen and ask why it's not working. Start small/simple, and build up. 

 

Good luck!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

YES!!!!! That WORKS!

 

Now that you've explained, I also actually understand WHY that works - believe it or not. Okay, well I think I do? ;)

 

BUT... why is it that in functions that contain timelines - it then doesn't work?

 

It works perfectly for nestedAni which is a nested timeline - but no go for nestedFunctionAni with the timeline nestedFunctionTL? (I have nested timelines that are set up as functions being called with variables - in case I've miscommunicated?)

 

.add(() => nestedFunctionAni.kill())

 

No go. And

 

.add(() => nestedFunctionTL.kill())

 

also doesn't work - maybe because outside that function, its timeline can't be killed? But I thought maybe -

 

.add((nestedFunctionAni) => nestedFunctionTL.kill())

 

Would properly direct the kill notice? And still nope. I also prefaced the right of the arrow with the this. bit, just in case? And still nada. No javascript errors, but the repeat doesn't end.

 

Knowing HOW if possible to send the same information to functions would be awesome?

 

(Oh and I'm completely wiped out for the day, passing out - so my master timeline is killing off my pestering function for the evening ;) It's been on "repeat" far too long.)

Link to comment
Share on other sites

Hey Creek, 

If you want to handle logic within functions and pass parameters it may be best to use the methods that were made for that,  like onComplete() or call()

I'd also advise that you stay away from fancy arrow functions entirely until you have a better understanding of JS.


Just stick with normal functions for now. (Some people may disagree with me here) But from experience teaching, there's less chance of getting confused about scope so it avoids unnecessary confusion.

You can also create functions this way that are called from your timeline but instantiated elsewhere. This keeps your code nice and easy to read.

I've put a playground together for you here.

See the Pen VwzZWQm by GreenSock (@GreenSock) on CodePen



Also a note - I would consider myself experienced with JS and GSAP. I still have to put together minimal demos like the one above in order to test and understand things.

When people ask questions here, the people that answer aren't necessarily drawing on knowledge that's immediately available.

 People helping have to:

  • Read the post
  • Read the code
  • Extrapolate what the question is
  • Read/reference the docs or search the forums for helpful threads
  • Make a demo if one isn't provided
  • Work out a solution
  • Explain the solution

 

It's quite time-consuming and a lot of the people in here do this voluntarily in addition to other work.

You can help by keeping your posts as short as possible. Just outline the specific question and provide a minimal demo.

Thanks

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

See the Pen gOxYZpz by tibbeecode (@tibbeecode) on CodePen

 

No clue how to end infinite repeat of function, as noted in code comments.

 

Labels also don't work, as noted in code comments. Included as possibly also related to using functions?

 

And I at least think I now understand why attempting to be "conversational" - when asking for help is a horrible idea? Thanks again for everyone's patience. Also, very much hoping that - in attempting to isolate - the gurus understand that even *I* understand that there are much easier ways of accomplishing the simple animation. Just doing my best to demonstrate what isn't working?

 

  • Like 1
Link to comment
Share on other sites

You should not be calling play in the middle of constructing a timeline. 

 

Your console.log doesn't work because you put in the middle of some GSAP code. The dot at the beginning of the .to is supposed to follow a timeline instance. Go search around for method chaining. That's how a lot of libraries, most notably jQuery work.

 

// BAD

let tlFunc1 = gsap.timeline(
    { 
      defaults: {
        ease: "circ"
      }
    } 
  )

  console.log(myarray[0])
  
  .to('.box', {
    backgroundColor: myarray[1]
  })

// GOOD
console.log(myarray[0]);

let tlFunc1 = gsap.timeline(
    { 
      defaults: {
        ease: "circ"
      }
    } 
  )  
  .to('.box', {
    backgroundColor: myarray[1]
  })

// GOOD
let tlFunc1 = gsap.timeline(
    { 
      defaults: {
        ease: "circ"
      }
    } 
  )  

  console.log(myarray[0]);

  tlFunc1.to('.box', {
    backgroundColor: myarray[1]
  })

 

If you want to kill something, you're going to need to reference it, just like I showed how to make reference in my last post to you.

 

 

But really, if you're making a master timeline and then trying to kill individual parts of it off, you probably shouldn't be making a master timeline. There is nothing wrong with having independent animations/timelines. I almost never use a master timeline. 

 

You can certainly use a master-ish timeline to control other animations/timelines...

 

let ani1 = createAnimation();

gsap.timeline()
  .add(() => ani1.play(), 1)
  .add(() => ani1.kill(), 5)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

You should not be calling play in the middle of constructing a timeline. 

 

Then what's the GSAP lingo for creating a loop within a timeline, as I'm "going for" here? ie Timeline has reached this point, now go back and repeat starting at "label". And guessing that would have a repeat parameter?

And, if I'm testing a long animation - then - skip all this other junk and play starting at "label"?

I'm guessing Play is just the wrong command?

 

1 hour ago, OSUblake said:

Your console.log doesn't work because you put in the middle of some GSAP code. The dot at the beginning of the .to is supposed to follow a timeline instance. Go search around for method chaining. That's how a lot of libraries, most notably jQuery work.

 

// BAD

let tlFunc1 = gsap.timeline(
    { 
      defaults: {
        ease: "circ"
      }
    } 
  )

  console.log(myarray[0])
  
  .to('.box', {
    backgroundColor: myarray[1]
  })

// GOOD
console.log(myarray[0]);

let tlFunc1 = gsap.timeline(
    { 
      defaults: {
        ease: "circ"
      }
    } 
  )  
  .to('.box', {
    backgroundColor: myarray[1]
  })

// GOOD
let tlFunc1 = gsap.timeline(
    { 
      defaults: {
        ease: "circ"
      }
    } 
  )  

  console.log(myarray[0]);

  tlFunc1.to('.box', {
    backgroundColor: myarray[1]
  })

 

AWESOME!!! I totally didn't catch why that was tossing up errors. It's especially nice to be able to "exit" GSAP calls and do other stuff.

 

1 hour ago, OSUblake said:

If you want to kill something, you're going to need to reference it, just like I showed how to make reference in my last post to you.

 

 

I did try to reference it - but javascript relates that it doesn't exist? Here is the CodePen with console log working, but still unable to halt the function?

 

See the Pen wvqwOmy by tibbeecode (@tibbeecode) on CodePen

 

1 hour ago, OSUblake said:

But really, if you're making a master timeline and then trying to kill individual parts of it off, you probably shouldn't be making a master timeline. There is nothing wrong with having independent animations/timelines. I almost never use a master timeline. 

 

You can certainly use a master-ish timeline to control other animations/timelines...

 

let ani1 = createAnimation();

gsap.timeline()
  .add(() => ani1.play(), 1)
  .add(() => ani1.kill(), 5)

 

 

The following is just my attempt to explain WHY my animation is structured as it is and why I wish to kill off functions. If there is a way to KILL infinitely repeating functions, then please ignore? ;)

 

--------------------------

 

I understand I'm not supposed to ask "logic" questions - but hopefully it's okay that I relate MY logic, which is working fine - with the obviously MAJOR exception of the apparently non-killable functions with endless repeats?

 

I'm animating a character with various expressions. Those are the expressions being added throughout the master timeline - like the color changes here in the aniColor function. While those expressions are continuing, there are "background" functions responsible for animating repeated body movements. It's a fish, floating in the water with his fins and whatnot moving about. Collectively those are all various versions of boxAni.

 

However it is I managed to do it, I really like the way everything is working. I'm now just "tweaking" - dealing with what I view as weird "issues"? I can't loop the sequence of expressions, and I can't eventually END the repeated animations.

 

In other words, I have the animation looking almost exactly as I want it to look. And it took me a VERY LONG TIME to figure out how to get it to work somewhat "seamlessly" together.

 

But, at some point, the fish swims off. And all of that floating around animation, the various boxAnis? They are HIGHLY processor intensive. So - fish off the screen - but GSAP is still animating him and eating up the computer power.

 

That's how I came up with the kill(). It works PERFECTLY on parts that are NOT functions. But the functions will not stop. I obviously don't know how to reference them. If it's a javascript thing - and I am not ALLOWED to reference them as functions? Then obviously I need to NOT ever use endlessly repeating functions ever again ;) They NEVER end.

 

I believe you're very politely telling me "You're doing it wrong." But, other than the stupid functions that won't STOP - however I did it wrong is otherwise working? ;) And I don't know enough to disassemble all of it without horrible fear that I'm going to BREAK EVERYTHING that's currently working?

 

My easiest path forward is to just try and REMOVE the bits where I screwed up and made any of the boxAnis into functions. Because, if they're NOT functions - then I'm allowed to kill them? As you related, they probably don't need to be functions anyway. When I initially created all of it, I obviously didn't know functions were so finicky?

 

And I promise I don't know of a more succinct way of explaining that - without various fears of coming across as even possibly "unappreciative" or "not paying attention" or whatever - truly VERY SORRY that I keep erring on the side of "Well it's long-winded, but I'm doing my best to explain myself as best I know how to explain myself?"

Link to comment
Share on other sites

YES!!!!!

 

I still have no idea how to kill off endlessly repeating nested function timelines ;) But I was able to replace the offending functions with simple nested timelines. Lost a bit of variance with ye olde variables but I'd accidentally stepped off into the "too advanced" section of javascript ;) I even tried setting a variable I could send with the basic logic - if killX=1 then KILL YOURSELF!!!! But functions are obviously against the entire notion of suicide, so good on them for being so special!

 

Again, thanks very much to everyone for all of your patience!

 

And I absolutely promise to create demos in the future at least trying to replicate what I think might possibly be going wrong. Not intending to waste everyone's time even further with my idiocy ;)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×