Duplicating animation and then killing the objects after a set time

2 part question:

Part 1: Is there a way to play an animation in a way that duplicates the instance in order to play the animation again without loosing the original element? For Example: a drop of water lands in a bucket. To play the animation again, the drop in the bucket disappears so the timeline can play again.

Part 2: I understand that this can be a heavy build after awhile. Is there a way of killing the instances after a certain amount of time? Maybe fades after x amount of seconds and then dies?

There's no way to dynamically create or duplicate elements/symbols and insert them into Hype's runtime. You'll have to make multiple copies ahead of time - enough to make sure they don't all get used so it appears they are all new.

Of course this is something common that would be nice to for Hype :slight_smile:.

I assume you're referring to physics bodies? If it is able to settle down, they will "sleep" but there's a lot of bouncing/falling situations where this might not be the case. You could make a timeline or animation that gets triggered at some much later point that could change it from dynamic to inactive via keyframes. There's not a way to do this from code (but we have perhaps the longest forum thread about adding a Physics API!)

Thanks Jonathan. If possible, this would be super useful for Users in the future. Maybe in an update :slight_smile: Thank you again for your help and advice

1 Like

If I do something like you suggested and create enough instances to make it appear to have the effect I need, will it effect the API information that is assigned to the divs? Each new donation that comes into the site will have to be assigned to the innerHTML of the div. If the animation is just repeating, will the same innerHTML also be repeating?

I’m a little unclear on what you are asking, but you’d probably want to assign unique element IDs to each item, but do so in a deterministic manner that could be paired with a counter. For example, you could do:



And then when you are trying to access one, you’d use code to concatenate the name with an index:

var element = hypeDocument.getElementById("item" + counterVariable);