Animation support?

[askorik]

Hi, do you have any plans for animation support (for node removal/insertion)? Some methods which can be used for such purpose? Or maybe you have some ideas how to animate nodes removal during the patch?

[askorik]

I think better to do this on template level (based on IncrementalDOM). So I close the issue.

[mitar]

I would reopen this issue because this is also my question. How can one use animations with incremental DOM where you want to maybe move components inside a list in slow motion to a new position in the list?

[sparhami]

I looked at a library written in React that does this to see how they approached it. At a high level, it seems like their approach is to:

1. Let the DOM node move due to the re-order
2. Compare the old location with the new location
3. Offset the element immediately so it goes back to its old location
4. Animate the DOM node to its new location

Seems like you could use a MutationObserver for the change notifications then do the same sort of thing. The only thing I'm not certain about is if the batching of mutation records would mean that the user sees the DOM node in the new state before you are able to offset it back to the previous state. In the future, encapsulating this logic into a web component seems ideal.

Without MutationObserver, the missing piece is that Incremental DOM doesn't currently notify on DOM node movement, only creation and final removal. Notifying globally on movement probably isn't too useful without a component framework to notify the responsible piece of the UI about the movement. Unfortunately, MutationObserver requires IE11+.

[sparhami]

Created an proof of concept using MutationObserver: https://github.com/sparhami/incremental-dom/commit/1464b59613b74235ef9a7a3e6fc7de7510baaf43

[mitar]

Let the DOM node move due to the re-order Compare the old location with the new location Offset the element immediately so it goes back to its old location Animate the DOM node to its new location

Yes, this is a general way how you would animate this. But the question is if this is something incremental DOM would support.

I also worry that MutationObserver would provide a potential lag. Maybe there should be some post-insertion, post-move, post-removal hooks one could hook into for a particular change?

[mitar]

Notifying globally on movement probably isn't too useful without a component framework to notify the responsible piece of the UI about the movement.

Yes, but just having incremental DOM for this would then allow others to build upon. Currently, you cannot really build upon this.

[sparhami]

I also worry that MutationObserver would provide a potential lag. Maybe there should be some post-insertion, post-move, post-removal hooks one could hook into for a particular change?

So looking at the spec, the mutation callback is done as microtask, which would be after any other JavaScript, but before the end of the event loop. This would be before layout, so there never will be a lag.

Yes, but just having incremental DOM for this would then allow others to build upon. Currently, you cannot really build upon this.

Well, for IE9/10. For IE11+, MutationObserver covers you. Would have to look at it and how to minimize impact (code size, performance) for people not using this feature.

[mitar]

Would have to look at it and how to minimize impact (code size, performance) for people not using this feature.

One check to see if a callback function is provided is probably not so expensive?