react-spring

[drcmda]

@aholachek Loved the article, do you plan to update this once more? Perhaps you'd like this: https://github.com/drcmda/react-spring

As for your demo, more or less: https://codesandbox.io/s/zl35mrkqmm

[aholachek]

Hi Paul,

Thank you for your message, I'll look into adding it this weekend. (If not to the article then at least to the repo.)

I'm excited to play around with react-spring.

Best, Alex

On Mon, Apr 9, 2018 at 12:16 PM, Paul Henschel notifications@github.com wrote:

@aholachek https://github.com/aholachek Loved the article, do you plan to update this once more? Perhaps you'd like this: https://github.com/drcmda/react-spring

As for your demo, more or less: https://codesandbox.io/s/zl35mrkqmm

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aholachek/react-animation-comparison/issues/2, or mute the thread https://github.com/notifications/unsubscribe-auth/ADgo6Izx5fJyTmkHuUhqd49ITkGluJxSks5tm4lngaJpZM4TM0k9 .

[drcmda]

Awesome! Here's a more detailed explanation as to why it was made: https://medium.com/@drcmda/why-react-needed-yet-another-animation-library-introducing-react-spring-8212e424c5ce

[aholachek]

Hi Paul,

Sorry this has taken so long! I ended up adding samples for other new animation libraries as well and trying to update the old examples.

The example you sent me uses keyframes, but it seems all elements remain in the DOM. I'm trying to implement the following requirements:

1. Initially, when it is first rendered in React, the grid should animate in, followed by the staggered animation of its children cards
2. Cards can be added individually to the cards array and should be animated in
3. Cards can be removed individually from the cards array and should be animated out as they leave
4. When the grid is removed from the DOM, it should wait for its children to animate out before animating itself and leaving the DOM

It looks somewhat like this:

Here's what I have so far (similar to what you sent me): https://codesandbox.io/s/w2rkqy78mk

I was wondering how to integrate the react-spring "Transition" component for enter/exit handling.

I think I've messed something up because I appear to be creating a memory leak when I try add a new card:

Would there be any way for you to take a look and point me in the right direction? Apologies if I'm butchering the intended syntax, I'm trying to limit the time I spend carefully reading the docs in the original spirit of my project, although that's basically just a convenient excuse for me to be lazy.

Best, Alex

​

On Wed, Apr 11, 2018 at 10:59 AM, Paul Henschel notifications@github.com wrote:

Awesome! Here's a more detailed explanation as to why it was made: https://medium.com/@drcmda/why-react-needed-yet-another- animation-library-introducing-react-spring-8212e424c5ce

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/aholachek/react-animation-comparison/issues/2#issuecomment-380483722, or mute the thread https://github.com/notifications/unsubscribe-auth/ADgo6B3c6GRknsJun7RjnzLRJSeiUp_sks5tnhpOgaJpZM4TM0k9 .

[drcmda]

I think there were bugs in older version, i've had a couple of complaints about that one. Later versions shouldn't leave anything behind when using Transition. The current version is 5.1.1. Using Transitions is fine of course, Keyframes is still a little rough and the question is in general if that's the kind of api we want. Overall i'm more than open for suggestions or wishes - i pretty much made it because i couldn't cope any longer with the options that we had before. So if it can be made better - i'm all ears. :)

[aholachek]

I will update this weekend with the new hooks-enabled version!