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!

Thanks, Rodrigo. Is there any syntax that utilizes the CSS transform-box property to keep an svg element centered without manually calculating x and y offsets? This syntax throws an error, but it does match the rendering of the CSS transform-box property until the svg attributes are updated: t1.to("#ellipse1",{duration: duration, transformOrigin:"50% 50%", transformBox:"fill-box", "transform":"scale(2, 2)",}) scale ellipse, translate 4 transform-box 3 (codepen.io) Thanks for your help!

Thanks, Rodrigo. If it's easy, I'd be curious if you have formulae for the x and y values you've applied to the svg's to keep them centered. If I can calculate these values from the element's current properties, this could be a good solution. I came up with a solution that keeps the svg centered through scale and attribute transitions by tweening the transformation matrix like this: transform: (i,e)=> "matrix(" + new_scale + "," + gsap.getProperty(e,"skewY") + "," + gsap.getProperty(e,"skewX") + "," + new_scale + "," + (gsap.getProperty(e,"cx") - gsap.getProperty(e,"cx") * new_scale) + "," + (gsap.getProperty(e,"cy") - gsap.getProperty(e,"cy") * new_scale) + ")" }}) scale ellipse, translate 2 matrix formula (codepen.io) I also put together a version using gsap Flip. It's more verbose but could prove useful if other properties are involved in the animation. I didn't find Flip.fromTo in the docs, but I tried it, and it appears to work! scale ellipse, translate 3 flip 2 (codepen.io) I thought there could be a more compact version that would allow gsap to make the transform matrix calculations by using CSS's transform-box. CSS correctly scales and positions the elements, but I couldn't find a syntax that would allow gsap to animate through these values. This syntax throws an Error: <ellipse> attribute transform: Expected transform function, "null". t1.to("#ellipse1",{duration: duration, "transform-origin":"50% 50%", "transform-box":"fill-box", "transform":"scale(.5, .5)",}) gsap looses track of the center point with both of these syntaxes, but maybe there's a formula that will adjust the transformation matrix based on the data-svg-origin attribute: t1.to("#ellipse1",{duration: duration, transformOrigin:"50% 50%", transformBox:"fill-box", "transform":"scale(.5, .5)",}) t1.to("#ellipse1",{duration: duration, transformOrigin:"50% 50%", transformBox:"fill-box", scale:.5,}) scale ellipse, translate 4 transform-box 2 (codepen.io) If you have formulae handy for calculating the x and y offsets based on the current element's properties, I'll give that a try. It's unclear to me if tweening the transformation matrix values directly might throw gsap off in subsequent animations of these elements. Thanks for your help!

Hi, I'm trying to figure out how to reposition and scale an element that has been scaled by a previous animation. The previous animation may have been completed and killed at the time the next animation is called. Overwrite appeared to work only if the animation that positioned and scaled the element previously had not been killed. In this example, I'd like to first apply new position and size attributes, and then apply a new scale. I'd like ellipse1 to end up at the position and scale of ellipse2 after the sequence is completed. Is a sequence like this best accomplished by recording several states in a different order with gsap flip, and animating to those states in the order I'd like them to be played? Thanks for your help!

Thanks. I'm adding scale transformations to the motionPath of a nested SVG element to give the illusion that the element is moving through 3D space. The modifiersPlugin works well for this. I'm wondering if it's possible to achieve the same effect with less processing power by tweening the scale through fewer scale values along the bezier curve, instead of on every tick. I couldn't figure out how to determine at what position values the element will pass through the anchor points without measuring the length of the path between anchor point segments using drawSVG. I could also sample the x values of the generic object every at every .01 position value or every .001 position value and tween the scale through those values at those positions. This would reduce the number of scale calculations, but it might not save much processing power if the rendered curve is almost identical.

Thanks. I was able to map scale for a nested SVG element to a bezier curve using the modifiersPlugin. Codepen appears to become unresponsive when I apply this structure to an element that is also on a morphSVG timeline. Is there any reason that a gsap.quickSetter()/onUpdate structure would use less processing power than the modifiersPlugin? I'm also considering building a timeline in a loop of tweens that sample the x values of the generic object at arbitrary intervals, for example every 100th or 1000th of the motionPath progress. Or using drawSVG to calculate the length of the segments between each anchor point, assuming that the progress % is equal to the length %, and only sampling the x values of the generic object at the anchor point progress values. Would either of these structures require significantly less processing power? Thanks for your help! https://codepen.io/fcdobbs/pen/xxaLJZy?editors=0010

Thanks. For a motionPath applied to properties other than x or y, like scale, will the target pass through the values in the array always at positions equally distributed across the duration of the tween, or is there a way to control how those values are distributed across the duration of the tween? Also, is there a syntax under which z can be a property used in a motionPath array? I'd like to add depth to the tween of the leaf on the motionPath.

Is there an equivalent in the motionPathPlugin to this description from the bezierPlugin docs? And if you need to affect multiple rotational properties (like in 3D tweens where the Bezier is going through x,y,z points which could affect rotationX, rotationY, and rotationZ), you can use an array of arrays, like[["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false]].

Thanks. Can you direct me to examples of how z translations are correlated to x and y in arrays that use the motionPathPlugin? The reason I mentioned nested SVG's is that I believe the coordinate units will be in the parent SVG's viewbox units, and the motionPaths will scale with resizing of the parent SVG. Thanks again.

Thanks! I’ll take a look at the gsap.quickSetter()/onUpdate solution. Maybe this will allow me to make the scale and y values a function of the x values. Did the GSAP 2 bezierplugin also only work on properties x and y, or did it calculate the same curve no matter what the units were labeled? Am I perhaps missing a simpler way of adding a z-axis to the motionPath of a nested SVG element? Thanks again for all of your help.

Thanks. You’re right. If I change the order of values for the first coordinate, the paths no longer line up. GSAP must be making the Bezier curve calculation differently based on the units. Here I added the leaf and the leafGroup to the DOM and changed the first coordinate value for the first two control points on both curves, and the inflection points in scale and in x no longer line up: https://codepen.io/fcdobbs/pen/JjaEPoq?editors=0010 Maybe the original pattern of each first coordinate value for both control points forming a straight line to the next anchor point first coordinate value represents a special case of the curves lining up according to both calculations. Is it possible to adjust the control point values in the x and y calculation for the curviness factor used in the calculation for properties that are not x or y? If I can adjust the control points for the x and y calculation, maybe I can get the inflection points and rates of change to line up for both kinds of Bezier curve. Thanks again.