How to create moving image from right to left with reverse using react-spring?

Question

Can someone help me with my propblem? I need to make animation with png image on my react project. My img must moving from right to left in own block with reverse in the end of the right side and left side. I made a part of my code, but cann't understand how to make reverse? I use react-spring. const [key, setKey] = useState(1);

const styles = useSpring({
    from: { transform: "translate(50%,0)" },
    to: { transform: "translate(-50%,0)" },
    config: { duration: 4000 },
    reset: true,
    reverse: key % 2 == 0,
    onRest: () => {
        setKey(key + 1);
      }
})

return <animated.img img className={classes.fishPicture} style={styles} src={fishOne} alt="fish"/>

score 0 · Answer 1 · answered May 04 '21 at 15:29

0

You can use an array version of the to key take the animation back to the original location and then combine that with loop: true

  const styles = useSpring({
    from: { transform: "translate(50%,0)" },
    to: [{ transform: "translate(-50%,0)" }, { transform: "translate(50%,0)" }],
    config: { duration: 500 },
    loop: true
  });

Here is a working example I created: https://codesandbox.io/s/react-spring-looping-tranform-animation-tgb7z

answered May 04 '21 at 15:29

Joshua Wootonn

1,041
7
9

Can I make this animation like random in block? – Alex Reed May 05 '21 at 09:58
What do you mean by random in block? – Joshua Wootonn May 05 '21 at 23:08
I mean random way of animation. Not only two ways. Can I make it with this library? – Alex Reed May 06 '21 at 12:01
Ah. I just update the sandbox to move the box randomly. The key here is passing a function as the to key in the spring. – Joshua Wootonn May 06 '21 at 13:43
Thank you very much! You are the best) – Alex Reed May 06 '21 at 18:52

How to create moving image from right to left with reverse using react-spring?

1 Answers1