5 ms·

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

41 points by tiago_simoes 11y ago

tobr 11y ago
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 11y ago
  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/MutationObserver https://developer.mozilla.org/en/docs/Web/API/MutationObserv...
  - tiago_simoes 11y ago
    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 11y ago
      In my experience you can change an element with a Mutation Observer before it is rendered.
      - tiago_simoes 11y ago
        cool, in that case I'll definetly try it.
- tiago_simoes 11y ago
  tkx for the feedback. done.
sesm 11y ago
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 11y ago
  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.
  - 11y ago

41 points by tiago_simoes 11y ago

tobr 11y ago

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 11y ago
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/MutationObserver https://developer.mozilla.org/en/docs/Web/API/MutationObserv...
- tiago_simoes 11y ago
  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 11y ago
    In my experience you can change an element with a Mutation Observer before it is rendered.
    - tiago_simoes 11y ago
      cool, in that case I'll definetly try it.
tiago_simoes 11y ago
tkx for the feedback. done.

sesm 11y ago

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 11y ago
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.
- 11y ago