fcdobbs

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.