Question

I’m trying to apply simultaneous animations, one being the UI explode effect. I’ve looked at the source code for the explode effect and see it’s being queued. Is there any way to prevent this from being queued so that I’ll be able to run multiple animations alongside the explode effect?

Thanks!

Answer 1

The issue is the way with which the explode function was designed.

It takes the offset of the element from the top and the left. it measures these for calculations regarding the position to return to, the distance to travel — etc. Without these values it’s incapable of making these determinations. It was not built robustly enough to support dynamic calculation; and rightfully so.

I can prove this theory in three examples.

First:

Queued Animation Issue (As Described)

Second:

Attempting to Inject using setTimeout returns error offset.top() is null

This gives you the ability to clearly see why this is happening. The most obvious answer is that there is no fix to this solution unless you changed the core functionality of the code.

This brings me to the last example. In the below example we wrap the element in a div. we animate the position of the parent element, and we explode the child element. let’s see how that works.

Third:

As we can see here, the issue is in how the offset is calculated.

It can get the end, and the beginning, but it cannot grab the offset in the middle of the animation.

I believe this is the issue that you were referring too – and unfortunately (by in large) there’s not much you can do about it except for write it yourself.