GSDevTools total time = infinity, not actual time while using {repeat: -1}?

[meltmedia-bannerland]

codepen.io/benheise/pen/WNmZWpO

• Current version: https://unpkg.co/gsap@3/dist/gsap.min.js = GSAP 3.12.5

Does a GSAP3 method/property exist to convert GSDevTools total time to the actual total time?

 

In my workflow GSDevTools helps out in a big way when determining time between frames.

The culprit is coming from repeat: -1 in the .fromTo()where total time is 1000 want this time to represent the actual time(screenshot provided)

• Removing repeat: -1 or creating repeat: # without the negative yes creates actual total time

 

See the Pen WNmZWpO by benheise (@benheise) on CodePen

[GreenSock]

Howdy, @meltmedia-bannerland. 

 

I read through your post a few times and I'm a bit confused because it looks like you got the correct answer from the other threads - when you have an infinite animation, it would make it completely impractical to use GSDevTools; the scrubber can't be infinite, nor should it be incredibly long because then dragging the playhead even one pixel would make the animation jump ahead quite a bit. See the problem? That's why it caps the duration at 1000 seconds. 

 

I'm also curious why your CodePen is using a super old version of GSAP, and you appear to be using the extremely old syntax too, like with the duration as the 2nd parameter and ease: Linear.easeNone instead of ease: "none". 

 

Your animation doesn't benefit at all from an infinite animation as you have it now - did you maybe intend to use repeat: 1 so that the yoyo works instead of repeat: -1? 

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

 

Thanks for being a Club GSAP member! 💚

[meltmedia-bannerland]

See the Pen OJqOJKy by benheise (@benheise) on CodePen

 

Appreciate the quick response!

 

Super old version of GSAP
Aim to do better! Thank you for informing me. 😀

 

Why {repeat: -1}?

When the banner frame finishes playing the clock + content fades out and transitions into the next frame unfortunately when using a positive number can't mimic what {repeat: -1} does automagically
 

Quote

My team still uses GSDevTools on a daily basis whether the infinite # exists or not

With all the threads relating to total time infinity was hoping maybe there was a way to:

• Offset with some math by dividing/multiplying by some method or maybe a 1 liner exists
• An innovative solution to cause 10000000005.25 to using normal total time stamping to exist for GSDevTools

 

Special thanks

💚 to you, the Greensock team, and the community for this incredible animation library!
Here is to a new year! 🎉 
 

[GreenSock]

8 hours ago, meltmedia-bannerland said:

When the banner frame finishes playing the clock + content fades out and transitions into the next frame unfortunately when using a positive number can't mimic what {repeat: -1} does automagically

I didn't quite understand that. Why not just use a positive number? Do you really need it to loop for 30+ years? 🙂

 

8 hours ago, meltmedia-bannerland said:

• Offset with some math by dividing/multiplying by some method or maybe a 1 liner exists
• An innovative solution to cause 10000000005.25 to using normal total time stamping to exist for GSDevTools

I read both of those about 10 times and I have no clue what you mean by either of them, sorry 🤷‍♂️ I tried, but maybe my tired brain is missing something obvious.

 

I'm not sure how you expect to make an animation that's 30+ years long scrubbable in a practical way. I don't understand why you don't just use a non-infinite repeat number, like 10 or whatever. What would you expect GSDevTools to do here? Are you wanting it to find any infinite animations and force them to not be infinite, chopping them down to a specific pre-determined duration?

 

8 hours ago, meltmedia-bannerland said:

Special thanks

💚 to you, the Greensock team, and the community for this incredible animation library!
Here is to a new year! 🎉 

Aw, that's nice of you to say. We sure appreciate your ongoing support! 💚

[meltmedia-bannerland]

Should have started with the actual problem rather the rabbit hole I took you on.  My apologies.

 

CodePen is updated and now shows the exact scenario: text + clock(animating SVG), starting with {repeat: -1}

• clockContainer(div surround SVG)
  • head (id within SVG)
  • left_arm (id within SVG)
  • right_arm (id within SVG)
  • body (id within SVG)

When changing {repeat: -1} to {repeat: 4} not displaying correct # of times(hands + head motion) when fading out

• Have to change to {repeat: 6} to mimic but still not producing the same result when using {repeat: -1} appears to hang longer

See the Pen OJqOJKy by benheise (@benheise) on CodePen

Quote

Have no doubt this is a logic problem, not seeing it. Have tried dozens of attempts to get the code to some how react with a positive repeatable # 

 

Clock @ { repeat: -1 }

Expected result when fade out occurs(transition) = 4 repeating movements

 

Clock @ { repeat: 6 } = 4 repeating movements

More time is being add while the clock animation stops before the fade out occurs(transition)

• When using {repeat: -1} the dude will keep animating through the fade out(transition)

 

Don't disagree this couldn't be done with a positive #, not understanding why this is happening?

[GreenSock]

Oh, now I see the problem. You're using a relative position parameter, "+=2" after you inserted an infinitely-repeating animation into the timeline. GSAP is smart enough to assume that you probably didn't intend "+=2" to literally be at the end of infinity, otherwise you'd never end up seeing that animation. So in that particular case, it ignores the infinite repeats when calculating the new insertion point. If you use a regular number for the repeats, those won't be infinite, so "+=2" will go after all the repeats.

 

tl.to(... {duration: 1, repeat: -1});
tl.to(... {}, "+=2"); // inserts at 3 seconds

Compared to...

tl.to(... {duration: 1, repeat: 3});
tl.to(... {}, "+=2"); // inserts at 6 seconds

So you can just use a better position parameter for the job, like label+=2, for example: 

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

 

I did some math there to help you calculate the number of repeats necessary to fill that space. 15 in this case. 

 

I hope that helps!

[meltmedia-bannerland]

💚 Greensock FTW and the fix is elegant 🏆

• Hadn't thought of that scenario was so used to using -1

Quote

From now on will be using positive #'s on repeat

Thank you soooooo much  - have a great weekend!

[meltmedia-bannerland]

Want to know more on how you came up with this:

Math.ceil((fadeDuration + 2) / 0.35); // 15

• Understand what Math.ceil() does
• 3 comes from fadeDuration variable
• 0.35 comes from the duration of the .fromTo()
  • Like seeing duration inside rather after the target:[]
• Puzzled by the + 2 in the calculation?
  • Stair stepped through repeat from 1-20 to realize why 15 is the chosen number
    • Is there a correlation to the +=2 at the end of the animation?
    • Your codepen though has a total time = 8.60, what GSAP 🔮 sorcery is this? 15 🤔 

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

       

Quote

Meaning is this a guess or you know programmatically 15 is the real #?

 

The Position Parameter 

"frame two+=2"

Insert tween 2 seconds after the frame label 

• Have also tested with "<+=2" which appears to do the same thing

[GreenSock]

On 1/26/2024 at 5:44 PM, meltmedia-bannerland said:

Puzzled by the + 2 in the calculation?

Because the tween starts at the "frame two" label, and then your fadeDuration tween starts at "frame two+=2" which means "2 seconds after the frame two label", thus it would be 2 + frameDuration for the total amount of time that you'd want your repeating stuff to occur. 

 

On 1/26/2024 at 5:44 PM, meltmedia-bannerland said:

Your codepen though has a total time = 8.60, what GSAP 🔮 sorcery is this? 15 🤔 

No sorcery  - your first tween is 3 seconds, then you've got everything else starting at that spot, so there's a 0.35-second tween that repeats 15 times, thus 16 total iterations equals 5.6 seconds. That adds up to 8.6 seconds. 

 

On 1/26/2024 at 5:44 PM, meltmedia-bannerland said:

The Position Parameter 

"frame two+=2"

Insert tween 2 seconds after the frame label 

• Have also tested with "<+=2" which appears to do the same thing

Yep. 

 

The "<" just means "the start of the post recently-added animation" so in this case that'd deliver the same result. 

[meltmedia-bannerland]

Quote

Puzzled by the + 2 in the calculation?

Now I get it for this, if it was + 3 then frame two+=3 🏆

Quote

so there's a 0.35-second tween that repeats 15 times

How does the repeat iteration render visually in the global timeline?

Does repeat create a separate timeline or insert/inject on the global timeline?

Probably the same iteration represented a different way visually

Does repeat iterations occur @ 3.35 while still doing the above repetition?

If a text layer(This summer!) is added while the repeat is occurring for 5.6 seconds as well:

.fromTo(text, { opacity: 0 }, { opacity: 1, ease:  "none", duration: 5.6 }, "frame two")

Is the global timeline doing this?

 

 

[GreenSock]

On 1/28/2024 at 12:11 PM, meltmedia-bannerland said:

Does repeat create a separate timeline or insert/inject on the global timeline?

No. It doesn't do anything like that - it's just one instance whose playhead gets updated accordingly. 

 

On 1/28/2024 at 12:11 PM, meltmedia-bannerland said:

Does repeat iterations occur @ 3.35 while still doing the above repetition?

Sorry, I don't understand the question. It might be good for you to just read through the docs a bit, like https://gsap.com/docs/v3/GSAP/

 

On 1/28/2024 at 12:11 PM, meltmedia-bannerland said:

If a text layer(This summer!) is added while the repeat is occurring for 5.6 seconds as well:

.fromTo(text, { opacity: 0 }, { opacity: 1, ease:  "none", duration: 5.6 }, "frame two")

Is the global timeline doing this?

I don't understand the question. There's no such thing as a "text layer" in GSAP world. It's just animations, and it doesn't care what is being animated - it could be a <div>, a generic object, a ThreeJS object, whatever. 

 

Hopefully the docs will clear up any misunderstandings you might have. 

[meltmedia-bannerland]

https://gsap.com/docs/v3/GSAP/ 👀 reading

 

 

 

 

[meltmedia-bannerland]

Read what I could with the docs, a friend helped on what happened above in our conversation.

 

The first part of the problem was the representation of the images defining infinity ♾️ could exist within frame two 🤦‍♂️

• frame three flag has been added to the images above to stop infinity thinking from existing

  • Quote

    Do understand our conversation is sort of getting broken by these additional edits

 

Also understand infinity could occur using

var tl = gsap.timeline({ repeat: -1 });

or

 

 

Which is what we are getting away from in favor of positive #(s) 👍 
No intent of causing infinity within var tl (ever)

 

Next is the mention of instance
The images above are representing the end state not the initial on what is actually happening when using
label: frame two

 

As to what I took away from my friend: 

• {repeat: 15} can be thought of as similar to a GIF animation
  • GSAP {repeat: 15} plays once, then repeats.
    Creating 16 iterations - Is this correct? 
    
• Can also see why the representation of the GIF animation above in our prior conversation is incorrect because time is moving forward not stuck in a state
• With text layer meant to say div, but no matter I understand GSAP is a single timeline 
  • Animations added to the timeline are executed in sequence, one after another

[GreenSock]

2 hours ago, meltmedia-bannerland said:

GSAP {repeat: 15} plays once, then repeats.
Creating 16 iterations - Is this correct?

Yes. repeat: 15 means "repeat 15 times". So the first iteration is not a repeat, thus repeat: 15 would mean that it'll run through the animation a total of 16 times. 

 

I read the rest of your response a few times and I'm not quite sure what you're saying or if you have additional questions. You're formatting is confusing for me. If you have further questions, please be very specific about those. 🙂

[meltmedia-bannerland]

You've answered the main part of the question and thanks for clarifying!