Show HN: AutoAnimations – Animate all inserted and removed DOM elements | Hacker News Reader

Show HN: AutoAnimations – Animate all inserted and removed DOM elements

github.com

41 pointstiago_simoes9 comments

Wow, overriding methods in the HTMLElement prototype to animate everything. It's so crazy it might work.

I think the readme should explain how it works though, and that it is a huge hack.

Huh, I was expecting MutationObserver[1] (which is the 'proper' way to do this, by the way). Not sure about the performance though - MutationObserver probably comes with more overhead.

[1]: https://developer.mozilla.org/en/docs/Web/API/MutationObserv...

Yup, that's certainly another option. Haven't tried it, but I would say that the asynchronous nature of mutationobserver would make this blink the elements before animating them.

In my experience you can change an element with a Mutation Observer before it is rendered.

cool, in that case I'll definetly try it.

tkx for the feedback. done.

First off all, thanks for the great idea!

This library will be very valuable when it's polished. But currently it's a little bit rough around the edges.

I've tried to used it on my React app by dropping the script on the page, and here are the issues I've found:

1. For some reason 'window.Velocity' was always 'undefined' for me. I had to replace 'window.Velocity' with '$.Velocity' on line 34 and replace 'Velocity' with '$.Velocity' on lines 160, 162, 167, 169. After that animations started to work, but:

2. During some operations, elements that should unmount from the page failed to do so.

3. After playing with expanding/collapsing a tree, based on <ul> and <li>, I started getting <li>'s without parent <ul>'s and a corresponding error from React:

"Uncaught Error: Invariant Violation: findComponentRoot(..., .0.4.1.0.1.0.1.0.0.2.0.$98350.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``. "

I think this happens when I trigger an action while animation is still running.

4. I have a button that opens a modal dialog and also covers the background with a <div> that has "opacity: 0.5". But suddenly after including this library this <div> ends up having "opacity: 1".

5. Another issue with modal window from previous point, is that animation happens only when I pop-up the window for the first time. On second and subsequent pop-ups there is no animation.

6. (not related to my app) In README you suggest that users of React initialize your library after the initial render is done. But the library itself doesn't provide a convenient mechanism to do so (for example, exporting AutoAnimation function). I had to modify the script in order to call AutoAnimation after the initial render (which, by the way, seemed to have the same effect as simply dropping the script into the page)

Feel free to contact me by e-mail if you need more information to fix this issues: sergey[dot]smyshlyaev[at]gmail[dot]com

Yes, it is rough, and your feedback will help with that. In fact, at start, I was looking to do this in ReactDom but I didn't find the right hooks for it. I'll contact you soon see what can be done about all those issues.

I believe I've fixed 1 and 4. Regarding the others it might, related to the way react does things, I'm trying to get some help form the React community to see how this could eb done in a better way.

Reply on news.ycombinator.com