Rich Shupe

Sorry, Jack, I wasn't clear on the mutually exclusive issue. Total progress is obviously 0-1, no confusion there. Total time is fixed, but how it's cut up into keyframes isn't. Hence the idea of a 10-second run changing into a 20-second jog and adjusting everything thereafter. Sorry, too, that there was a lot of detail. I think I at least feel like the approach is validated: Build whatever I know initially (dummy tween or known totalTime and any keyframes to date) Add a balance progress of (1-lastProgress) that takes a balance duration of (totalTime - accumulatedKeyframeDurations) Kill tweens and then start over upon the next edit. If anyone has any ideas, I'm open to hearing them. I have to say, Jack, I've been having so much fun getting back into GSAP after a prolonged absence. GSAP makes me want to create things without necessarily first having a project to drive the effort.

Hi Jack/Carl/forum gurus, It's been a very long time! I think I need some general platform- and tech-agnostic strategy advice about how to allow a user to edit a timeline during use. I would very much appreciate any thoughts from anyone. Please forgive me if this is long, but I hope it's not overly complicated. I just want to lay out the needed detail. I need to simulate a simplified GPS-like experience with a follower on a path. For the sake of discussion, imagine a route on a map that you must walk to get from point A to point B. That's working just fine but three critical points are giving me pause. The speed will change constantly (slowing down, speeding up, and stopping for periods of rest). The user must edit the points at which the changes occur, and the times involved. The user must be able to scrub through the animation to position the follower, and then enter values into a table for the tween durations. Thereafter, the animation must be updated each tie the data is edited. The total duration of the "trip" is fixed. So I'm hoping for recommendations (or possibly just confirmation) on what I think is the need to REbuild the animation cyclically. I assume the best thing is to give you a few ideas of what I think I should do and invite better solutions/any points I may be missing. My initial assumption was that the best way to do this was to build a timeline of multiple tweens. I considered adding labels to one tween but, considering other givens that I'll include, didn't see any advantage of one approach over the other. I'm open to ideas. In order for the user to position the follower at any point during the editing phase, there must be an initial tween so the user can scrub a slider to move the follower along the path. Ideally that time can start out as arbitrary, and I'm near certain I have to rebuild the timeline multiple times so that shouldn't matter. But it's also possible for me to insist that the user begin with the maximum time. That will be known in advance, but may change (circling back to the need to rebuild often). Tweening the progress of the follower along the path will always use values of 0 to 1, and the path will never change. But the duration of each mini segment along the path will not only vary, it will likely change during editing. (E.g., the first leg is walking from house to store. Second leg is from store to park. But the author may later change that to leg 1 is running to the store, an inserted leg two will be resting for a short time, and leg three will be from store to park.) I think my biggest question is how to handle the duration of the entire timeline during editing. Something like: To allow the author to play immediately, create a first tween of the follower using any arbitrary time. (Assume 1 second.) Playback is inconsequential, as only the scrubber will be used to move the follower along the path. At this point, we have a timeline of one tween. If the fixed max duration is known (let's say 100 seconds), I can use that instead of an arbitrary time, but I can't see how it matters. Again, open to learning. Author adds a keyframe for leg one, which results in changing the first tween from progress 0 to 1 over 100 seconds, to from progress 0 to .10 over 10 seconds. However, I still need the user to be able to move the follower along the entire path, so I need to create another tween--behind the scenes--to make up the rest of the journey. I can add an arbitrary time for scrubbing or, if the total time is known, add the balance. In other words, I can now add a tween from progress .10 to 1 that lasts either 1 second, or 90 seconds if I know the max duration and can subtract 10 from 100. The rest is rinse and repeat. Here's a hypothetical example: Tween progress 0-1 for 1 second. Max time becomes known so rebuild initial tween for 100 seconds. First leg inserted, 0-0.10 for 10 seconds. Add another tween 0.10-1 for 90 seconds. Second leg inserted, 0.10 to 0.20 for 10 seconds. Rebuild resulting in three tweens, the last from 0.20-1 for 80 seconds. First leg is lengthened to 20 seconds. Rebuild resulting in three tweens, 0-0.10 for 20 seconds, 0.10-0.20 for 10 seconds, and balance of 0.20-1 for 70 seconds and so on. Some obvious questions that spring to mind are: Are there any compelling reasons to create one tween of the max time and rebuild each time using label positions? Is that not the same general process? Can anyone think of a better way? For example is there an easier way to cut up one master tween, rather than adding component parts to sum up the total duration, that would be easier? Is there a recommended process for rebuilding the timeline upon each edit? Because I can just wipe everything out and start over, and this is during the editing process, I don't currently see a need to carefully tear anything down killing tweens, concerning myself with existing callbacks, etc. I can just "nullify" everything and start over each time, if needed. It would be very nice to be able to "rebuild" as transparently as possible, but don't want to make anything overly complicated. Thanks very much for taking the time to read this.

Carl, fantastic. In an isolated case, this is EXACTLY what I needed. I have to fit it in with other things going on around this, and pass in complete, and possibly reverse, event handlers, but this is an awesome start! Rich

I should add that the result I get when I try to reverse each individual tween (as when I'm using getChildren() on the timeline) is that they just pop out. Also, I like the Timeline use because all my events are set-level, not individual tween-level. So, if I play and reverse a timeline, i can use complete and reverse event handlers, etc If I play the timeline, but reverse the tweens, it's a bit more of a pain.

Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?