generating FLIP timelines on the same elements, playing them later

[fcdobbs]

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!

See the Pen eYPVVJJ by fcdobbs (@fcdobbs) on CodePen

[GreenSock]

I skimmed your code and much of it looks odd to me. I'm very confused about exactly what you're trying to do. 

• Why are you creating a bunch of timelines that are only populated with .set() calls (thus the whole timeline has no duration whatsoever) and then calling .progress(1)? 
• I noticed you did t3.add(t2.progress(1)) but that doesn't make much sense - an animation's playhead is controlled by its parent timeline. So you seem to be trying push a timeline's playhead to its very end and immediately add it to another timeline whose playhead is at the beginning, so that'd cause the child's playhead to go back to the beginning. 
• There's no such thing as immediateRender: false on timelines. Maybe you meant to add that in defaults?
• I fear that you might be misunderstanding what Flip even does. Normally Flip is used immediately when a state change occurs. It seems like you're trying to create a bunch of Flip animations that shouldn't happen yet...and scheduling them for later. Is that correct? And why? 
• Your demo was far, far more complicated than it really needs to be. I'd strongly encourage you to just try something as basic as possible to create the most minimal demo to illustrate the core problem. Don't create 12 different timelines, tons of set() calls, multiple Flips, etc. The more you isolate things, the more accurate and fast the answer you'll get. 

[fcdobbs]

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:

See the Pen dygmPOY by fcdobbs (@fcdobbs) on CodePen

 

And in a reverse animation like this:

See the Pen YzJaPQG?editors=0010 by fcdobbs (@fcdobbs) on CodePen

 

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?

[GreenSock]

I'm still having a tough time weeding through the 100+ lines of code and deciphering exactly what your intent is, but maybe you meant to do something like this?: 

See the Pen mdzLmvj?editors=0010 by GreenSock (@GreenSock) on CodePen

[fcdobbs]

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.

[GreenSock]

Hi @fcdobbs. I read your question 3 times and I'm still lost, sorry. 

 

On 5/12/2023 at 3:34 PM, fcdobbs said:

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()

 

That first line is just animating the playhead from wherever it happens to be when that tween first renders to the very end. You'd probably want to set ease: "none", by the way. 

 

I'm totally confused as to what you're doing on that second line. Why are you killing the timeline? Don't you want to play it using the line above? 

 

You're not creating any "copy" of anything there. I don't know what you mean by "the original animation appears to persist in memory by reference as a target in the new timeline" - yes, if you are keeping references around, JavaScript must hold onto those in memory. But I suspect you mean something else by that statement and I'm missing it. 

 

On 5/12/2023 at 3:34 PM, fcdobbs said:

Or do perhaps all animations of non-numeric properties have to be generated and played immediately?

 

Definitely not. They don't have to be played immediately. But what do you even mean by "non-numeric properties"? The example you gave above is indeed tweening a numeric property (time). All animations ultimately boil down to interpolating numbers. 

 

You'll always have a much, much better chance of getting a good answer if you provide a very simple demo that clearly illustrates the issue you're wrestling with. We'd love to help with any GSAP-specific questions. 

[fcdobbs]

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:

See the Pen mdzLmvj by GreenSock (@GreenSock) on CodePen

[GreenSock]

3 hours ago, fcdobbs said:

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?

That sounds to me like a bad approach (logic-wise). What if the user resizes the screen? What if the user clicks while the animation is midway through? The entire point of having things dynamic like that is for everything to beautifully adjust to whatever the current layout happens to be. Think of a timeline sort of like a recorded video. The start/end values get recorded internally so that if you restart() the animation, it always plays exactly the same way. If you pre-bake all your animations like that ahead of time, you lose the dynamic nature of things. What if the start or end values should change (based on screen resize or a partially-finished animation or whatever)? 

 

Or perhaps I'm misunderstanding your question again. 🤷‍♂️ I'm having a hard time understanding why you seem to be really pushing to pre-bake everything into timelines that you always reuse. Sometimes that's a great technique, but not if you want everything to remain dynamic, especially with Flip stuff.