meltmedia-bannerland

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

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

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

Now I get it for this, if it was + 3 then frame two+=3 🏆 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?

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 🤔 codepen 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 FTW and the fix is elegant 🏆 Hadn't thought of that scenario was so used to using -1 Thank you soooooo much - have a great weekend!

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 https://codepen.io/benheise/pen/OJqOJKy 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?

https://codepen.io/benheise/pen/OJqOJKy 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 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! 🎉

codepen.io/benheise/pen/WNmZWpO https://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