ripmurdock

Thanks. I'll give this a try. Eliminating the parent timeline didn't work because I wasn't able to control the duration and ease for the entire sequence. I paused the child timeline so that it would not already be running when called by the parent timeline. This structure was recommended to me previously. Here's a minimal example: https://codepen.io/ripmurdock/pen/WNMeegB When the t1 timeline runs on its own, the 1st and 2nd tweens alternate. When it is called by the parent timeline, the 1st and 2nd tweens no longer alternate. The 1st tween is executed over all elements, and subsequently the second tween is executed over all of the elements. The position of the tweens on the parent timeline is different than the position on the child timeline. I'll try the flattenTimeline function. Thanks again.

I also tried eliminating the parent timeline and applying a duration directly to the t1 timeline constructed with two staggered tweens. Under this scenario the sequence order is preserved, but duration defined for the timeline is overridden. The duration is the sum of the staggers intervals over the elements. Perhaps a stagger value determined by a function could ensure the tweens alternate over a shorter duration.

Thanks. This sequence is part of a longer animation. The parent-child structure was recommended to apply an ease and a random duration to the entire sequence. Does nesting a timeline change the position of the tweens in the child timeline? This animation depends on the tweens being executed always in the same sequence. I corrected the syntax to pause the child tween. I'm still seeing the 1st tween executed on all of the items before the 2nd tween is executed on any item. Perhaps a child timeline requires the stagger value to be determined by a function to ensure the tweens maintain the same sequence when called by a parent timeline.

Thanks. Also for this simplified version with only three elements, on my end I'm seeing tweens executed in the wrong order. The breaking point appears to be 0.6 seconds for these functions. The t1 timeline defines alternating positions of the tweens, which is what the timestamps show for a duration of 1 second: Even with only 3 elements, the order in which the tweens are executed is scrambled at 0.6 seconds. According to the definition of t1, the "set 250 (1st)" tween cannot be executed on index 2 before the "set 500 (2nd)" tween is executed on index 0. On my end I'm seeing the 1st tween executed on all of the elements before the 2nd tween is executed on any elements, even though the definition of t1 establishes alternating positions: https://codepen.io/ripmurdock/pen/WNMeegB?editors=0011 Is there any way to enforce strict adherence to the position order defined in the t1 timeline? Thanks for your help.

Thanks. A child timeline constructed with two staggered tweens over the same array of items 0-n with the second tween delayed by the stagger value like this: const aperture = gsap.timeline({ paused: true }); aperture.set(targets, { autoAlpha: 1, stagger: stagger }); aperture.set(targets, { autoAlpha: 0, stagger: stagger }, stagger); defines alternating positions for the first and second tween over the array like this: item 0 1st tween item 1 1st tween item 0 2nd tween item 2 1st tween item 1 2nd tween . . . item n 1st tween item (n-1) 2nd tween item n 2nd tween I would expect the order of this sequence to be preserved also if the value of one or more of the properties in the tween is determined by a function. The timestamp logs show that as the complexity of a function contained in the tween increases or the duration of the parent tween decreases, the order in which the functions are executed deviates from this order and that the deviation varies directly with function complexity and inversely with parent tween duration. The 1st tween is executed for a batch of items, followed by the 2nd tween being executed for a batch of items, instead of each tween being executed for a single item in alternating fashion. Interestingly, the timestamp logs also show that when the alternation breaks down, one or more stagger intervals are skipped and that no tweens are executed at any timestamps with intermediate values. The timestamp logs look like this: item 6 1st tween item 7 1st tween item 8 1st tween item 9 1st tween item 5 2nd tween item 6 2nd tween item 7 2nd tween item 8 2nd tween It looks like there is some limit to how complex a function contained in a tween can be for a given timeline duration. For my purposes, I would like to have a way to maintain the position of the tweens on the timeline no matter how complex the tween functions are. Alternatively, I would like to understand how complex a tween function can be for a given duration before the position of the tweens on the timeline is scrambled, so that I don’t have to create timestamp logs and run tests to make sure my functions are not too complex. Thanks for your help.

Thanks for taking a look at this. In this simplified version I've replaced the conditional logic and references to element properties with a simple counting loop. https://codepen.io/ripmurdock/pen/PoErvoa?editors=0011 For a 0.5 second duration the sequence completes and correctly alternates the two functions for a count to 100,000, but consistently skips stagger intervals, and then executes the functions in the wrong order for a count to 1,000,000. The original test didn't have any loops, but it did have conditional logic and element property returns. Is there any way to know what I can put in a function inside a tween before the functions begin to be executed in the wrong order? Thanks again.

Thanks. I couldn’t figure out if there’s a way to use progress to sample the right hand side of a timeline, but I was able to get the two sided animation I was looking for by tweening the time property backward and forward and keeping track of the last reversal point: https://codepen.io/ripmurdock/pen/PoELgvv Separating the logic that alternates the image properties from the logic that determines the animation reversal points removed the functions from the to statements. I’d be curious why my original solution didn’t work. Timelines with function determined values is one of the features of GSAP that I’m most interested in exploring. Here’s a simplified version of the sequence above with more descriptive variable names. https://codepen.io/ripmurdock/pen/wvpOeKr?editors=0011 It has one child timeline and one parent timeline. In the real version I have the whole sequence repeated 3 to 7 times, but I just entered 7 here. After the sequence is completed, the animation resets to image_12. The original child timeline uses the same structure to ensure that exactly one image in the series is visible at all times, although the logic determining the reversal point was contained in the to function. Feel free to enter any value 1-7 for t1counter_for_console to see the timestamps for when the function for each tween is fired on that iteration. The console only executes the log statement the first time the statement is run, so you can only monitor one iteration at a time. Also, feel free to enter any value for parent_timeline_duration. On my end the logs show the tween functions alternating as expected for 2+ second parent tweens and batches of intervals being skipped and the functions not alternating for parent tweens 2 seconds or less for the longer code and 1 second of less for the shorter code. I'd be curious if there's a limit to how many statements can be included in a 'to' function over a given duration before the statements begin to be executed in the wrong order, like this: Thanks for your help.

Thanks. I’m looking to integrate your randomized progress solution with the rest of my animation. I added a randomized number of repeats, but I couldn’t figure out how to randomize the return point for all but the last return or how to randomize the duration of the return: https://codepen.io/ripmurdock/pen/YzYgVgX I’d like the sequence to start from aperture.progress(0) and end on aperture.progress(0), with each of the intermediate reversal points and the duration in both directions randomized with an ease applied. Please let me know if the randomized progress solution can be revised such that the aperture animation doesn’t return to aperture.progress(0) after each call and the duration is random on the forward and reverse motion. Thanks for your help.

Thanks for your help. Here's a scaled down example that demonstrates the quantum leap phenomenon. https://codepen.io/ripmurdock/pen/bGaZBee With shorter code I didn't see any quantum leaps until the parent timeline duration was shortened to 1 second or less. Even with no ease on the parent timeline and less code, the phenomenon is common at 0.5 seconds or less. I added labels to the variables in the console log to make it easier to follow. The child timeline is constructed with two staggered series of tweens on the same elements with the tweens in the second series entered into the timeline at a position offset equal to the stagger interval, so that the child timeline consists of series of functions at these positions item 1 function 1 . . . item 2 function 1 / item 1 function 2 . . . item 3 function 1 / item 2 function 2 . . . The timestamps are in the child timeline interval units. I set the stagger interval to 1 second. At larger durations for the parent timeline, the functions are executed in the expected order, at approximately 1 second intervals with the first declared tween executed ahead of the second declared tween for ties: At smaller parent timeline durations, tweens make quantum jumps to other tween's intervals, like this: In this example, no tweens are executed at the 4th (3 second) interval, the 6th (5 second interval) , the 8th (7 second interval), or the 9th (8 second interval), and no tweens are executed at any intermediate intervals. When GSAP catches up, the tweens are not executed in the order in which their positions are defined on the timeline. Instead, all of the function 1 tweens are executed, and then all of the function 2 tweens are executed. Based on the positions defined in the timeline, it should be impossible for the tween representing function 1 on item 9 to be executed before function 2 is executed on either item 6 or 7. I'd be curious if there's any way to strictly enforce the position order defined in the timeline when deploying staggered tweens in nested child timelines. Or perhaps there are some limits of which I should be aware when deploying staggered tweens or tweens constructed with functions. Thanks again.

Thanks! This is a more elegant solution than mine. I spent a lot of time figuring out the triggers in each direction that would allow the animation to start from any visible image. I'm still interested in understanding how GSAP executes staggered functions. Going forward should I assume that if a staggered timeline is nested, the intervals could range anywhere from 0x to 3x the average interval, so that if two timelines are executing identical functions on identical targets, one might execute the function for item #9 before the other executes the function for item #7? I expected the parent timeline to expand and contract the intervals in the child timeline, but apparently the intervals can't have any intermediate values, so GSAP expands and contracts the intervals by grouping tweens together on alternate intervals and doesn't allow other tweens that would fire during those intervals to fire until after the multiple tweens grouped together on a singe staggered interval fire. In the example above the tweens from the two series alternate about 1 second timestamp apart, and all of a sudden two intervals are skipped, and six timelines are executed at the 9.177432 timestamp, which would be fine if the order in which they are executed wasn't scrambled. In this case the series of tweens that starts one stagger interval ahead of the other series executes it's tween on items 7, 8, and 9 and the second series subsequently executes it's tweens on items 6, 7, and 8. Is there any way to predict the order in which staggered tweens will be executed if they are nested? I'll look to integrate your solution with my current project. Thanks again!

Yes, thanks. Iteration is the property I was searching for. I would have found it if it had been mentioned under the repeat, repeatDelay, or yoyo methods. I'm not sure redoing my animation in a yoyo modified by iteration will solve the issue I encountered writing each direction separately, since it crops up in the forward version as well as the backward version. Thanks again.

Hi, I’m attempting to write an animation that runs in randomly generated lengths forward and backwards with an ease applied to each segment. The sequence of child timelines appears to breakdown at parent timeline durations of less than 2 seconds with power4.inOut and also breaks down with no ease applied to the parent timeline at durations of less than 0.5 seconds. The child timeline applies conditional logic to toggle the visibility of the targets in alternating fashion, so the order in which the functions are executed is critical, while the time between firings is not. At shorter parent timeline durations, tweens that are staggered in the child timeline sometimes all end up with the same timestamp leaving no tween executed at the intervals at which those tweens should have fired. The times at which the staggered tweens are executed appear to be quantum states with no intermediate values, with or without an ease applied to the parent timeline. With a parent timeline duration of 2 and ease of power4.inOut, toggling visibility is still correctly alternated on the 4th repeat, for example with item 7 being made visible immediately before item 6 is hidden. With a parent timeline duration of 1.2 and ease of power4.inOut, tweens which should be staggered are executed at the same timestamp with none executed at intermediate values or at the vacated timestamp positions. Here the tweens that should have been executed with timestamps of approximately 7, 8, and 9 are all executed with a timestamp of approximately 9 for both series, so that instead of tweens alternating toggling at 7, 8, and 9 timestamps, six tweens are executed with timestamp around 9, with all three from the first series executed before all three from the second series: Changing the stagger times for the child timelines doesn’t appear to alter the tendency of staggered tweens to be clumped together. Clumping of staggered tweens also begins happening with no parent timeline ease at parent timeline durations of 0.5 seconds or less. Is there any way to get a series of staggered tweens to execute at intermediate timestamps when nested in a parent timeline without tweens making quantum leaps to a different tween’s timestamp? Or is there a more efficient way to execute an accordion-like in and out animation of discrete images running at random lengths in each direction with an ease applied to each segment? Thanks!

Thanks. I was able to stop the extra forward firing of the child timeline and have a yoyo'ed timeline with an odd number of repeats end at the starting point by adding Pause(0) to the child timeline. I wasn’t able to find a property that gets the current repeat count, so I tried instead using a negative stagger in order to run the animation at different lengths forwards and backwards. I ran into a different issue combining functions with a negative stagger, so I’ll post a separate topic, in case anyone sees similar results. Thanks again.

Thanks for your help. I was able to apply an ease to the parent timeline by also defining a duration and a progress with this syntax: t2.to(t1, {duration: 0.5, progress: 1, ease: "power4.inOut"}); Here's a simplified version of the sequence: https://codepen.io/ripmurdock/pen/MWrPQRY?editors=0010 When I added a repeat with yoyo to the parent timeline, I expected the first tween of the child timeline to be executed last when the repeat value is an odd number, but the parent timeline always appears to end with the last tween of the child timeline. I tried a few different variations with the basic parent timeline tweening child timeline, which I forked here: https://codepen.io/ripmurdock/pen/XWVyJVP It looks like tweens added to the child timeline after the parent timeline is defined are included within progress = 1 and the duration and ease are defined by the parent timeline. I haven't been able to figure out how repeats on the parent or child timeline are interpreted. In the basic example I wasn't able to get the parent timeline with yoyo to finish at the starting tween for any number of repeats. Each yoyo repeat value I tested ends with the sequence being played forward with the final forward sequence executed with the parent parameters for even number repeats and without the parent parameters with odd number repeats. If I set parent yoyo to true, with 0 repeats I get: 1: child timeline with parent parameters forward If I set parent yoyo to true, with 1 repeat I get: 1: child timeline with parent parameters forward, 2: child timeline with parent parameters in reverse, 3: child timeline without parent parameters forward If I set parent yoyo to true, with 2 repeats I get: 1: child timeline with parent parameters forward, 2: child timeline with parent parameters in reverse, 3: child timeline with parent parameters forward If I set parent yoyo to true, with 3 repeats I get: 1: child timeline with parent parameters forward, 2: child timeline with parent parameters in reverse, 3: child timeline with parent parameters forward 4. child timeline with parent parameters in reverse, 5: child timeline without parent parameters forward Also, using index values in conjunction with stagger looks useful, as demonstrated in this tutorial: https://css-tricks.com/tips-for-writing-animation-code-efficiently/ Are these javascript default arguments? 1 The index 2 The specific element being affected 3 An array of all of the elements affected by the tween Or do these argument defaults take effect any time GSAP is referenced above the function declaration and no argument is passed for the 1st, 2nd, or 3rd parameter respectively? Thanks again!

Thanks. I'll put together a shorter version to test adding easing to the timeline. The example from the forum above nests the timeline and adds easing parameters, although it wasn't clear from the documentation what property middle parameter controls. I tried a couple of different syntaxes in the fd_aperture_tl01 function below, but the easing term appears to have no effect. //t2.to(t1, {ease: "sine.inOut"}); t2.add(t1, {ease: "sine.inOut"}); from the JS section of the codepen: function fd_aperture_tl01() { var t1 = gsap.timeline(); var t2 = gsap.timeline(); t1.to(".FD_vis_ap_cl-2", {duration: fd_frametime, visibility: "visible", stagger: fd_framedur}); t1.to(".FD_vis_ap_cl-2", {duration: fd_frametime, visibility: "hidden", stagger: fd_framedur}, "<+=" + fd_framedur); t1.to(".FD_vis0-12_cl-01", {duration: fd_frametime, visibility: "visible"}); //t2.to(t1, {ease: "sine.inOut"}); //t2.add(t1); t2.add(t1, {ease: "sine.inOut"}); t2.yoyo(true).repeat(3).repeatDelay(fd_holdtime1); return t2; }