React Spring Limitation?

[WilsonCWong]

Hey,

You say that react-spring was unable to get the cards to animate in and out in opposite directions, but I changed the following and it seems to work fine?

https://github.com/WilsonCWong/react-animation-comparison/commit/ee3e1539f664497b305a8462c28caa62e89fb7e7

  const cardsTransition = useTransition(visible ? items : [], item => item, {
    ref: cardsRef,
    config: config.stiff,
    from: { opacity: 0, translateY: -30 },
    enter: { opacity: 1, translateY: 0 },
    leave: { opacity: 0, translateY: -30 }, // Change this to -30 from 30
    trail: 400 / items.length,
    unique: true,
    reset: true
  });

Was there a bug with this I'm not noticing or...?

[GeorgeBelanger]

Hmm I was pretty new to React spring and definitely didn't try - 30 - 30 so probably no bug just user error!

On Wed, Jul 3, 2019, 3:22 PM Wilson Wong notifications@github.com wrote:

Hey,

You say that react-spring was unable to get the cards to animate in and out in opposite directions, but I changed the following and it seems to work fine?

const cardsTransition = useTransition(visible ? items : [], item => item, { ref: cardsRef, config: config.stiff, from: { opacity: 0, translateY: -30 }, enter: { opacity: 1, translateY: 0 }, leave: { opacity: 0, translateY: -30 }, // Change this to -30 from 30 trail: 400 / items.length, unique: true, reset: true });

Was there a bug with this I'm not noticing or...?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/aholachek/react-animation-comparison/issues/6?email_source=notifications&email_token=AD6YU7MFI5AEUCDXSE2UWKTP5T4ANA5CNFSM4H5I4J2KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G5GZIUA, or mute the thread https://github.com/notifications/unsubscribe-auth/AD6YU7L6LKTE4OETD44AJWLP5T4ANANCNFSM4H5I4J2A .

[aholachek]

Hi @WilsonCWong, not sure what GeorgeBelanger's comment is referring to exactly but to clarify, I wanted group card behavior to differ from individual card behavior. Your update causes individual cards to fade-in-down rather than fade-in-up, which is what the test specifies.

So, as in the animejs example, the group of cards should animate in from the top, but individual cards should animate in from the bottom. I'm basically missing that ability to specify a difference between the entry/exit behavior of an individual element versus a staggered group of elements.

[aholachek]

Actually, now that I re-read the description, that intention definitely isn't clear, so I'll definitely edit the docs

[WilsonCWong]

@aholachek Ah, yeah, that makes it a lot more clear. Thanks for the comparisons btw, the examples are very helpful!