Jump to content
Search Community

meltmedia-bannerland

Business
  • Posts

    9
  • Joined

  • Last visited

Posts posted by meltmedia-bannerland

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

     

    image.png.e6a9ab58d264679e13d58d9f24a905be.png

     

    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? 
        ghost.thumb.png.5b9544df17b2ca567464c01d5d946f66.png
    • 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
  2. 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?
    image.thumb.png.26a585afc12cd215df9c79bfca092621.png


    Probably the same iteration represented a different way visually

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

    15.gif.71cd99727465ce6fc9d7b191aca6b64d.gif


    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?

    image.thumb.png.4f907c4294a1f9f8357a04d7135ceae9.png

     

     

  3. 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
  4. 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-negative-1-20240126.gif.7b632f14f33ccef1c3479321be371090.gif

     

    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)

    clock-repeat-positive-6-20240126.gif.ff350592644acd9062e4a5df83e6bace.gif

     

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

  5. 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! 🎉 
     

    • Like 1
  6. codepen.io/benheise/pen/WNmZWpO

    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

     

    GSDevTools-infinity-20240125.png

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

×
×
  • Create New...