fcdobbs

Hi, Has anyone put together a demo similar to OSUblake's awesome Awesome Face Benchmark linked above using GSAP 3 and a more recent version of PIXIJS? https://codepen.io/osublake/pen/vNwRdO Which of these calculations can be handled by GSAP 3's Inertia or PhysicsProps plugins? Also, PIXI.loaders used in this example has been deprecated. Thanks!

Thanks, Cassie! I think this is getting closer. I'd like to rebuild main timeline on each iteration with a sequence determined by the available timelines, but a random order would be fine for testing. I'd like to only include childTwo if the event has been triggered and include childThree with the onReverseComplete alternating between forward and reverse. This was the part that made me think I should read the timelines into an array as they are created. Also, I'm wondering if I assign an id to each timeline each time it's created, can I be sure that other code that grabs a timeline with gsap.getById() will only find one timeline with that id, or at least always find the most recently created timeline with that id? Thanks again!

Thanks. If I use this structure, what's the recommended process for only adding child timelines that have been created, so far, maintaining the order in which they are created, reading their current progress, and accommodating timelines with onComplete, onReverseComplete, or neither eventcallbacks? function childOne() { const tl = gsap.timeline(); ... return tl; } function childTwo() { const tl = gsap.timeline(); ... return tl; } const main = gsap.timeline(); main.add(childOne(), 0.5); main.add(childTwo(), "+=3");

Thanks, guys. Here I've eliminated the child timeline with an onComplete eventcallback. Hopefully, if I get the main timeline working for a child timeline with an onReverseComplete callback, it will work for both. I included both in the example because it's important that both types work, and it's important that the child timelines are only added to the main timeline after they have been created. The order in which the child timelines are created and whether or not they are created at all is unknown at start time. child timeline reverse, restart 7.7 t2 only (codepen.io) I've changed animation.timeScale(4).reverse(0, false) to : animation.progress(1).timeScale(-4) and set: smoothChildTiming:true It looks to me like javascript is successfully maintaining a reference to the correct child timeline. When the timeline is accessed through the variable, javascript logs the correct id and progress, and the most recently created targets are animated with the most recently defined properties. I have the durations increasing incrementally on each iteration of the child timeline. On the first iteration, t2 duration is set to 2. The log from the t2 function reads duration 2. The main timeline function accesses t2 through a variable, and the log correctly reads t2's id, t2's progress, and t2's duration, and sets the main timeline duration to 2. "t2 duration 2" "maintl t2: progress 0 duration 2" "maintl duration 2" On the second iteration, t2 is unchanged because onReverseComplete has not been called. The main timeline function accesses t2 through a variable, and the log correctly reads t2's id, t2's progress, and t2's duration, and the main timeline's duration as 0.5 (t2 duration at timescale 4). The main timeline correctly runs t2 as accessed through the variable in reverse at timescale 4: "maintl t2: progress 1 duration 2" "maintl duration 0.5" On the third iteration, t2 has been rebuilt because onReverseComplete been called. The log from the t2 function reads duration 4. The main timeline function accesses t2 through a variable, and the log correctly reads t2's id, t2's progress, but reports t2's duration as 2, the initial value, and reports the main timeline duration as 2. I expect these duration values to be 4. The main timeline correctly runs t2 as accessed through the variable forward at timescale 1, animating t2's current elements with t2's current properties: "t2 duration 4" "maintl t2: progress 0 duration 2" "maintl duration 2" On the fourth iteration, t2 is unchanged because onReverseComplete has not been called. The main timeline function accesses t2 through a variable, and the log correctly reads t2's id, t2's progress, but reports t2's duration as 2 and the main timeline's duration as 0.5. I expect these duration values to be 4 and 1, respectively : "maintl t2: progress 1 duration 2" "maintl duration 0.5" The fifth and sixth iterations repeat the process of calling onReverseComplete at the correct t2 progress, and javascript reporting the correct id and progress for the timeline as referenced by the variable, and for the duration of the child timeline as referenced by the variable to remain at the initial value. The main timeline animates the child timeline's current targets with the current properties on each iteration. I'm wondering if I'm missing a GSAP setting that will allow the duration of the child timeline as referenced by the variable to update at the same time the targets and properties are updated. The main timeline gets out of sync faster as the rate of change of the child timeline's duration is increased, so I'm hopeful that if I can get the child timeline's duration as referenced by the variable to update, everything else will work as expected. Thanks again for all of your help.

Thanks, guys. I have several animations that I'd like to run on the background of my page. I'd like to add them to a main timeline so that I can control the overlap of the animations, pause the background animation on user interaction, and resume it after a hiatus in user interaction. My idea was to store references to the child timelines in an array as they are created and to have a function refresh the main timeline onComplete with the child timelines referenced in the array. The master timeline appears to play the child timelines with the current targets and properties, but the durations stay the same as the first iteration. I've logged out the durations for the child timelines from each function to demonstrate. I've experimented with invalidate. The durations of the child timelines as referenced by the variable don't update when the targets and properties update. Maybe if I can sync the current durations with the current targets and properties, then reverse and restart will work as expected for the child timelines. I hope the attached demo will make my goal more comprehenisble. It includes a child timeline with an onComplete, a child timeline with an onReverseComplete, and a master timeline that refreshes onComplete. Thanks for your help! https://codepen.io/fcdobbs/pen/JjePbom?editors=0011

Hi, I'm trying to play, reverse, and restart a child timeline from a dynamically generated parent timeline. There's something I'm not understanding about where the child timeline playhead is when progress is either 1 or 0. Here's a simplified example. The child timeline dynamically creates a random number of elements. When the parent timeline is generated, I'd like to add the child timeline and play it from the beginning if the progress is 0, and I'd like to run the child timeline in reverse at an increased timescale if progress is 1, and make no change to the child timeline if progress is between 0 and 1. The animation isn't running on reverse or on restart. Any insight would be appreciated. Thanks!

Thanks, Rodrigo. Both of these options work well. I'm surprised that iterating through the elements works with flexbox animations. I thought that what was going wrong in my first attempts was that the final position of the boxes isn't known until all of the boxes are updated to static position. The loop structure also works! Thanks again.

Thanks. Is it possible to create two paused timelines, each with a flip child timeline, and toggle between playing the parent timelines on a click event? Like this, but without any custom logic that is based on the current screen size and orientation being run each time the animation is played: https://codepen.io/GreenSock/pen/mdzLmvj

Yes. Thanks. That's my question. What's the correct syntax to pass the index value of the target to the onStart function of the stagger object or reference the index value in the stagger object?

It looks like I still need to figure out how to make the startTime and durations both functions of the target index without iterating over the elements in order to animate non-numeric properties. I couldn't find any syntax that makes the stagger value a function inside the stagger object. I also couldn't figure out how to reference the index value of the target. The onStart function of the stagger object has access to the arrays defined in the parent scope, so I thought if I can reference the target index value that I might be able to set amount to 0 and defined a delay and duration that is a function of the target index, like this: Stagger with matching end times - flex no iteration (codepen.io) What's the right way to define a function for the duration of each stagger and have the staggers all end at the same time? Thanks

Thanks. This works great. I want to make sure I'm not missing a process that would allow for adding an animation of non-numeric properties to a paused parent timeline, and playing it later. This could be useful for animations that might be run more multiple times and for which the values will be the same until the window is resized. I thought something like this might produce a copy of the animation that could be played later. The original animation appears to persist in memory by reference as a target in the new timeline. flipTimeline.to(tl, {time:tl.duration(), duration:tl.duration(),}) tl.progress(0).invalidate().kill() Or do perhaps all animations of non-numeric properties have to be generated and played immediately? Thanks again for all of your help.

Thanks for your help. Here's a simplified version. I’d like to toggle these elements between absolute and static positions in a forward animation like this: GSAP flex grid flip fwd only (codepen.io) And in a reverse animation like this: GSAP flex grid flip rev only (codepen.io) I'd like to have different eases on the forward and reverse animations, and I plan on adding a stagger iteration to randomize the stagger durations and have them end simultaneously. Maybe Flip isn't the right tool. What's the right strategy for getting these animations to run backward and forward on the click of a button, for example?

Hi, I'm just getting started in learning GSAP FLIP. The two timelines I've created appear to conflict with each other. If an instance exists of both, neither will run. They're built with identical child timelines in reverse order with different eases. I tried duplicating the timelines in separate functions, but It appears that recording the FLIP states on the same elements creates a conflict. In this example I've delayed running the function that creates the reverse animation timeline, so that both will run. I'm wondering if I'm missing a procedure for generating FLIP timelines on the same elements and playing them later. Thanks for your help!

Works like a charm! Thanks again for all of your help.

Hi, I'd like to modify this "stagger from end of timeline" solution to use a startTime pulled from an array. I'm generating the duration for each element and total duration, like this: randomSineOut = () => Sine.easeOut(Math.random()) elemDurationMin = 1 elemDurationMax = 4 let elemDurationAr = [], totalDuration = 0 for (h=0; h<elemCount; h++) { elemDurationAr[h] = elemDurationMin+(elemDurationMax-elemDurationMin)*randomSineOut() totalDuration = Math.max(elemDurationAr[h],totalDuration) } For each tween I'd like to set the duration = elemDurationAr[index] and the startTime = totalDuration - elemDurationAr[index]. I believe modifying the tween duration has to be done from the stagger object. I'm having trouble figuring out how to pass these values to the stagger object and its onStart function: Stagger with matching end times - edit (codepen.io) Any help would be appreciated. Thanks!