How do I create a dynamic useTransition react-spring animation with no from?

Question

I have a react function that tries to live stream a bunch of mouse cursors for/to the people in the "room".

I'm updating/adding each mouse cursor with a web socket connection.

For some reason I can only get the animated react-spring element to show if I set a 'from'. It needs to be from the mouse's previous position and not from the corner / 0, 0 / fixed position.

const transitions = useTransition(mice, {
    enter: item => [
      { left: item.x, top: item.y },
    ],
    leave: item => [
      { left: item.x, top: item.y },
    ],
    delay: 0,
  })

  return (
    <>
    {transitions((props, item) => (
        <animated.div
          className='mouseCursor'
          key={item.id}
          style={props}>
        </animated.div>
      ))}
    </>
  )

adding a 'leave' gets it a bit closer, but it's not animating. — Ashley Simons, Nov 26 '22 at 11:53

score 0 · Answer 1 · answered Nov 26 '22 at 12:21

0

This seems to have done the trick...

import { useTransition, animated, config } from 'react-spring';
// ...
const transitions = useTransition(mice, {
    config: { ...config.molasses, duration: 100 },
    from: {
      position: 'absolute', left: 0, top: 0,
    },
    enter: item => [
      { left: item.x, top: item.y },
    ],
    leave: item => [
      { left: item.x, top: item.y },
    ],
    update: item => [
      { left: item.x, top: item.y },
    ],
    keys: item => item.key,
    delay: 0,
  })

answered Nov 26 '22 at 12:21

Ashley Simons

340
4
13

Well not quite. This only works if you are animating one item at a time. – Ashley Simons Nov 27 '22 at 00:51
I can get it to soughta work with useSprings, but still one element at a time and it's not giving the children a key. – Ashley Simons Nov 27 '22 at 01:39
Hmm it looks like just rendering without any animation is also struggling. I'll need to take a closer look. – Ashley Simons Nov 27 '22 at 02:09
There was a state bug in my code and new mice were replacing the array rather than adding to it. But still trouble animating more than one item. – Ashley Simons Nov 27 '22 at 04:21

How do I create a dynamic useTransition react-spring animation with no from?

1 Answers1