
Show HN: AutoAnimations – Animate all inserted and removed DOM elements - tiago_simoes
https://github.com/OutSystems/AutoAnimations
======
tobr
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.

~~~
mediumdeviation
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...](https://developer.mozilla.org/en/docs/Web/API/MutationObserver)

~~~
tiago_simoes
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.

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

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

------
sesm
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

~~~
tiago_simoes
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.

~~~
tiago_simoes
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.

