React-Spring как правильно анимировать буквы массива

Question

В этом коде с react-spring Я получаю анимацию, в которой каждая буква ждет, пока не закончится предыдущая анимация, а также тем временем она анимируется

Почему это происходит и как это исправить?

  const text = [...'hey there how are you']
  const from = { transform: 'rotateX(0deg) translateY(0px) rotate(0deg) scale(1)' }
  const to = inView
    ? [
        { transform: 'rotateX(30deg) translateY(10px) rotate(-13deg) scale(1)' },
        { transform: 'rotateX(0deg) translateY(-22px) rotate(3deg) scale(1.1)' },
        { ...from },
      ]
    : from

  const trail = useTrail(text.length, {
    config: { mass: 5, tension: 2000, friction: 200 },
    from: from,
    to: to,
  })

  return (
    <>
      <Div ref={handleRef}>
        {trail.map((props, i) => (
          <animated.span key={`char${i}`} style={props}>
            {text[i] === ' ' ? <>&nbsp;</> : text[i]}
          </animated.span>
        ))}
      </Div>
    </>
  )

CodePen

https://codesandbox.io/s/epic-buck-4ubud

Answer 1

С помощью useSprings Я могу получить независимые строки для каждого элемента, которые я могу отложить индивидуально

Это делается "из коробки", когда to: имеет только одно правило, но если вы хотите объединить больше правил, то каким-то образом каждый элемент не является независимым от других

С помощью useSprings вы можете получить эту индивидуальность

const text = [...'hey there how are you']
  const from = { transform: 'translate3d(0,0px,0)' }
  const to = inView ? [{ transform: 'translate3d(0,-40px,0)' }, { transform: 'translate3d(0,40px,0)' }] : from

  const base = {
    config: { mass: 5, tension: 2000, friction: 200 },
    from: from,
    to: to,
  }

  const springs = useSprings(text.length, text.map((t, i) => ({ ...base, delay: 100 * i })))

  return (
    <Div ref={handleRef}>
      {springs.map((s, i) => {
        return (
          <animated.span key={`char${i}`} style={s}>
            {text[i] === ' ' ? <>&nbsp;</> : text[i]}
          </animated.span>
        )
      })}
    </Div>
  )

CodePenhttps://codesandbox.io/s/epic-buck-4ubud