Torrfura

I wonder if this is the best way to dynamically overlap nested dynamic timelines / tweens, or is there a even better way to do it? I've made a really simple example to show what I mean. Using .add(tween, '<.1') does not work since the first item will be altered aswell.

Nah, I think I'm done. I've accepted that my end goal may be a mix of dreams and feature freaks, and just want to show you where I was going with this solution. I am really grateful for your time and efforts in helping me. Big thanks to you, and this community!

Probably because i'm in tunnel-vision mode when I'm trying to solve stuff like these I want it to work 100% as intended. I could easily do a classic callback-solution, but I really love the control you have when using gsap timelines. I'm doing this with 100% es6 in the real solution, just wrote that example for you so I could explain my problem. Can i e-mail you somehow? I just want to show you what I am after. I have a mockup / demo where the timeline does not work as I want, but the animation is (solved using events / callbacks) almost completed. I cannot post a video here though

That's perfectly on point! I feel I need to underline the importance of having the timeline "record" all states, so I can pause / rewind / timescale even the sorting operation. Where I've fallen short is, as I said at the beginning, is "recording" the count of each iteration (red box and down) and figure out when / how I can add style='order: X;' on each row (greenline) and then retrieve coordinates and animate, and also keep track of this when jumping in the timeline...

Yes, that's a extremely simplified animation, just to get the timeline. Exactly! And store that change in timeline, so if I reverse timeline, the '0 correct', label get the right count. I did not do any timeline for this in the example, as I don't really know how to pass whatever number count it is at that moment. One of my big issues. Sort these rows accordingly to how many correct numbers i have in each row. So if one row, has matched 2 of the red boxes (whenever that timeline has completed), it get's "2 correct" and get's sorted as row 1, if none of the other rows has more correct numbers ofcourse..

Ok, I've tried to really simplify my animation / timeline as much as possible. It looks stupid, but I think my end goal will be somewhat understandable. I've left almost all logic out for this example, just to not bloat your vision / ideas. Quick sum of what I want: Run number timeline At the end of the number timeline, count amount of corresponding numbers in each row, and store that value in the timeline so that I can reverse / skip the animation at any time, still keeping track of the current amount of correct numbers in the sequence. Animate total correct number div in each row, (not essential at this point / example), each time it's changed. Create a timeline at the end of each number loop, that will animate and sort all rows using flexbox order as definition to get coordinates, FLIP technique. I've put down so many, many hours in trying all possible angles, as you've seen in a few posts from me recently. If anyone can help me figure this out, I'll be forever grateful. And be able to sleep at nights https://codepen.io/joseelsantos/pen/2043b9499c17331364182832cd238fc2

Ok, I've been working on a (for me) very complicated timeline for over a month now. I'm getting close to giving up I'm doing an "correction" experience. I have a set of result numbers with it's own timeline, and when each number timeline has finished, I need to sort another set of divs (rows). If any of these rows have the same number in it, it get a new order depending on how many correct numbers you have. My approach has been to: 1. Create a master timeline 2. Loop through all result numbers and add their timeline, to the master. Then in the end of the same loop -> 2.1. Create a sorting timeline, loop through all rows and set its 'order = x' (based on amount of matches in each row), and then create a FLIP (Paul Irish) animation (timeline) and add to master timeline. I need this to be responsive, working if the rows are divided in columns (hence using flexbox order). Kind of, this is maybe iteration 25 of different approaches I've been taking on. None has worked yet...

Oh, I must have done something wrong, now I get it to work with immediateRender: true. Sorry for bloating the forums, wish I could delete my posts. But if someone is looking at this anyhow, is there a better way to store data in the timeline than this way?

I wonder how I can accomplish desired result, with a paused timeline? When you see the codepen with initial state running, and watch the console, you'll see I saved a timestamp for each tween in the timeline. I want to re-use these values whenever I reverse the timeline. It works as you can see when timeline is running by default, but not when the initial state is paused. If you uncomment paused: trueyou'll see what I mean. I've tried different settings with immediateRender etc, but no luck

I find my self doing this all the time, because if I set startTime to a predefined value on all .add(), it will already render the first couple of items as played. There must be a better way to make all tweens / timelines, in a master timeline, to overlap each other, except the first (since there is no tween before that to overlap)? The codepen illustrates my question let tl = gsap.timeline(), startTime = 0; this.items.forEach((item) => { let animation = item.spin(); // Returns a gsap.timeline tl.add(spinAnimation, '-=' + startTime); startTime = spinAnimation.duration() * 0.8; });

I often use classnames to keep styling and code separated. In my case, I work with a company that has many sub brands, with unique theming etc defined as less variables. I find it useful to set a class, retrieve certain properties such as colors etc, then remove it and animate towards these values. It is no problem doing this with a .call() in a timeline for example, and just use classList. But I found it very handy at times atleast.

Crap, the wall I hit yesterday, was indeed a wall then Need to figure out some other way to tackle this then... Many thanks for your engagement Zach, much appreciated!

That feels a bit submissive? If I have a timeline that has over 60 second total duration, I'd kind of kill the experience for the user if they are 45 seconds in the animation, and their mobile device happends to change orientation, to just kill the animation and start over? That's just my opinion ofcourse. Back to topic, so what you are saying is that is impossible to have a tween to update it's starting position whenever the timeline reaches it's start, when it has looped / repeated? (As we can see, it works when the timeline runs the first iteration...)

As you see in my last example, repeatRefresh within my tween, added to a timeline, does not fire whenever the timeline repeats. But yeah, I'm probably approaching my problem from a weird angle, but that's why I'm here asking for help The problem I am trying to solve: The sequence / timeline I am writing, is mostly dynamic depending on user input before the timeline begin. The user can whenever they choose, pause, restart or skip to the end of the timeline. Since we live in a world of a million devices, I need to make sure it is responsive. In that sense, I must recalculate the start position of some tweens, if the user has resized / rotated their device somehow, before the playhead in the main timeline has reached start position of that specific tween. I am animating from a set value, to x/y 0 (to keep it dynamic / responsive when the tween / timeline ends).

Ok, so I managed to get my team along on the ride of upgrading. I've minified my example as much as I can. Remember, this problem I have is deep within nested timelines, so using onComplete etc on main tl, to re-draw sub timelines 3-4 levels deep, feels vastly inefficient. repeatRefresh does not help me, so I'm starting to wonder what that property really do? In short: I want the sub-tween / sub-timeline to update it's start (from position) x, each time the playhead of the parent timeline get to the first frame of that tween. So if i'm repeating the timeline, or choose to restart etc. It calculates a new from x value, when the playhead is on 0 in that tween... var tl = gsap.timeline({ repeat: -1, delay: 5 }); tl.add(getTween()); tl.play(); function getTween() { return gsap.fromTo('.box', { x: () => { var rnd = gsap.utils.random(-200, 200, 1); console.log('[tween] from x: ', rnd); return rnd; }, repeatRefresh: true, immediateRender: false }, { duration: 2, x: 0 }); } https://codepen.io/joseelsantos/pen/YzzJgLB?editors=1111