1

I have a product tile component which accepts an imageSrc prop. Whenever the imageSrc prop is updated, I want the old image to fade out as the new image is fading in. With my current implementation, the animation does not work. I can confirm that the imageSrc is updating properly, however the image updates instantly with no animation. How can I get this animation to work?

  const imageTransition = useTransition(imageSrc, item => item.key, {
    from: {
      opacity: 0,
      width: "100%",
    },
    enter: {
      opacity: 1,
    },
    leave: { 
      opacity: 0 
    },
  });

  {imageTransition.map(({ item, props, key }) => (
    <animated.img style={props} key={key} src={imageSrc}></animated.img>
  ))}
Ian Springer
  • 223
  • 2
  • 7
  • 19

1 Answers1

3

You should use the item in the render method instead of the image src.

{imageTransition.map(({ item, props, key }) => (
    <animated.img style={props} key={key} src={item}></animated.img>
  ))}

Update:

I created a working example: https://codesandbox.io/s/animated-image-change-component-sy6vu

Peter Ambruzs
  • 7,763
  • 3
  • 30
  • 36