pragdave

It's probably my mistake in the way I structure the code, but... take the Hanoi example I have a function that sets the stage: it draws the towers, creates the disks, and loads the disks onto the first tower. At this point, there's a timeline, but it isn't running and it contains nothing. The user hits the play button and we're off to the races. When they hit the reset button, I want to move the disks back onto the first tower. But the original stage was not created using GSAP.set: I'm using svg.js. So if I have to use gsap.set to clear the elements, I'm either going to have to have to write the setup code twice (once positioning normally and the second time positioning using gsap), or find some way of setting things into the timeline, then running it for just one update() to get them to draw, then pause until the user presses play. The solution that seems to be working right now is that I use kill() on the original timeline, then replace it with a brand new timeline. As long as I then animate positions using {attr: {x:, y: }} and not just x:, it seems to work. I suspect rotations and scaling will also need some TLC, but I'm not currently using them. Probably a stupid idea, but couldn't you use attribute settings on the underlying elements to detect when someone changes an attribute that was the subject of tweening, and then invalidate its entry in the cache if so?

I have a document containing dozens of animations. I prerecord timings for these, but the viewer can interact with them too. For example, imagine a Towers of Hanoi animation where they can type a digit to change the number of disks, speed it up and down with a slider, and so on. The elements are all SVG, and they are all dynamically generated when the document loads. This is true for all the other animations as well. After spending time playing, they want to read it again, so I have a RESET button, which I want to use to rewind everything, and reset all the elements to their initial state, so that the document behaves just as it would if they'd reloaded it. I first bumped into these issues with the Hanoi example. I prepopulate the model with 5 disks, and then let the viewer choose how many to use; every time they hit a digit I restart the animation with that number of disks. What was happening is that if the animation had got to a certain point (say with disk 1 on peg C), then when I restarted and repositioned the disks, they would initially be drawn on the starting peg, but once you pushed PLAY they'd jump around all over the place, retaining their idea of where they'd been last.

Ah, yes it does. And that explains why the two got out of step when I just used invalidate. Thanks for the explanation. Does GSAP keep track of all elements that have been decorated with the cached transformations? I know I can recursively traverse a timeline, but that won't find elements that are not currently participating but that were in the past. If there was an API for this, I could then do a global reset. If not, I'll just maintain a list as I create them. Cheers Dave

Isn't that what invalidate() is supposed to remove, though. I set the x and y attributes simply because those are the attributes that are set when I first added the element to the timeline. I wanted to stop everything, clear the timeline, and re-add that element to the start. Given that invalidate() was supposed to clear the cache, I figured that by removing the transforms that gsap had added, I'd be back where I started out. I ended up using the kill() solution, which works fine. I guess now that it's all working for me, it's more of an academic question of jujst what invalidate() actually does... Dave

That's what I expected it to do, yes. Shouldn't invalidate() force it to reread the coordinates from the DOM? Also, is the call to kill() needed: the documentation says that the timeline is then eligible for GC. Does that just mean the prior _contents_ of the timeline, but not the timeline itself?

The example contains an SVG element. After 1 second, it uses a timeline to animate a move to the right, taking five seconds. Two seconds later (that is, in the middle of the animation), a timer fires, pauses the animation, and clears and invalidates the time line. Two seconds after that, it manually moves the element back to the start position (by deleting the transforms added by GSAP and manually setting x and y). Two seconds after that, it repeats the initial move. Because I called invalidate() in the middle, I was expecting the timeline to pick up the current position of the element in the DOM and animate it from there. Instead, you'll see that the animation causes the element to immediately jump to its last location in time timeline, and it looks as if it is simply continuing the initial animation. Am I misunderstanding what invalidate() does?

I'm animating a presentation. It'll runs for 30-40 minutes. Objects come and go: there may be 4 on display at one time, and 400 a minute later. In all I'm guessing there may be a couple of thousand SVG elements in total. So I don't keep them all lying around: I remove them when I get the chance. Maybe a couple of hundred elements are connected by the lines I'm talking about. Most of the time, these elements are not on screen, and when they are, they are mostly stationary. So... If I was to redraw every connecting line on every onUpdate for the entire 30 minutes, I'm guessing my browser would melt. It's already spinning fans. Instead, by using the modifiers plugin, I get called only when one of my connected elements moves. If none of them moves for 10 minutes, then I'm not doing 200x4x60, or 48,000, calculations of connecting lines per second for the entire presentation. And those calculations involve a fair amount of geometry, bezier curves, and so on. So running them only when absolutely necessary seems like a good idea. SVG might be slow, and JavasScript might be fast, but when you make JavaScript do so much unnecessary work, it becomes the limiting factor. Frankly, I found your response to be dismissive and somewhat off-putting. You took the time to create a couple of pretty examples, but they had nothing to do with my problem: performing a calculation the minimum number of times when something moves. Let's kill this thread: no need for anyone to reply.

I'm animating a drawing that contains various regular shapes (polygons, circles, ellipses, etc). I join pairs of these shapes with a line. The line acts as if it joins the centers, but it is cropped to a few pixels shy of the edge of each shape, and an arrowhead is added. I have all the geometry worked out, so that given two shapes at arbitrary positions I can connect them with the line. When I animate the shapes, I need the line to animate too. I can't simply linearly interpolate the before and after endpoints, because the cropping means the endpoints don't follow a straight line. Instead, I want to use the modifiers plugin to intercept changes to the x and y attributes of the two shapes, and redraw the connection line. This is what the spring connector demo does. However, if both shapes are moving, this means I redraw the line four times for each update cycle. So far my best guess is to use the modifiers to build a list of the new coordinates and then have the onUpdate callback draw the line based on them. But this seems kinda hacky. Is there a better way? Cheers Dave

I think my main goal is to make the code a little bit more expressive. < and > are really nice visually, and make the timelines easy to reason about. tl.time() isn't rocket science, but it does break the flow just a little. The strange thing is that I'm finding myself having to use this all over the place. My use case is an animation tracks a queuing system, with randomly distributed arrival rates, a limited buffer, and one or more servers that read from the queue. There's no one fixed overall timeline, because what happens isn't predetermined. In that environment, I'm totally event driven, and when an event occurs, I need to kick off the corresponding animation exactly at that time. I'm seriously impressed that GSAP can rock and roll like that. It just occurred to be that, in my particular case, the= notation would express my intent better. Thanks for a great product Dave

If the conveyor stops, for example, then all the boxes on it should stop. Right now, I just pause the timeline. If they were all separate, then I'd need to keep track of them. It's not a major issue, but at the same time it seems like a fairly trivial change

I'm animating simulations, and so I often have to kick things when events occur, and while other things are happening. Imagine, for example, I add boxes to a conveyor belt as they arrive. I have a timeline for boxes on the belt, and I want to add the new box and start it's animation _now_. I'm probably missing something, but the way I currently do it is tl.to(box, { ... }, tl.time()) I was thinking: is there any demand for adding a "=" offset, analogous to < and >, which means "now". "=2" would be 2 seconds from now, etc. (And I bet there's already a way to do this that I haven't noticed. Apologies if so) Dave

I don't know how I missed `addPause()`. Just what I was looking for. I needed to suspend an animation at certain points until an external event occurs, and that does just what I want. Thanks

First of all, let me just say that after just a few days of playing, I’m really impressed at how well you guys have crafted this library. Very nicely thought out. So, I’d like to be able to create a timeline which contains animations I’ll be running later. That timeline needs to pause at times and then be resumed. I create a timeline with {paused: true}, and then populate it. However, if I try to add a pause to that timeline (using tl.pause()) it doesn’t become part of the timeline itself. Instead it commands the timeline itself to pause (which it already is). The Codepen shows a simple case of this, creating a paused timeline, adding an animation, a pause, and an animation. When I kick the timeline off, it runs to completion. Is there a trick that lets me add the pause to the actual timeline sequence? Cheers Dave