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"/>

Joshua Wootonn · Accepted Answer · 2021-05-04 15:29:29Z

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 4, 2021 at 15:29

Joshua Wootonn

1,2969 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Reed Over a year ago

Can I make this animation like random in block?

Joshua Wootonn Over a year ago

What do you mean by random in block?

Alex Reed Over a year ago

I mean random way of animation. Not only two ways. Can I make it with this library?

Joshua Wootonn Over a year ago

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.

Alex Reed Over a year ago

Thank you very much! You are the best)

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related