1

I'm quite new to React and all the fancy stuff.

On google-react-map, there's a few markers. Each of them have an Icon I want to scale on hover.

I use styled-components for styling

const Icon = styled.div`
  width: ${MARKER_SIZE}px;
  height: ${MARKER_SIZE}px;
  /* animated */
  transform: scale(${props => props.scale});
`;

with react-motion

<Motion defaultStyle={{ scale: 1 }} style={{ scale: spring($hover ? 1.5 : 1) }}>
  { interpolated =>
    <Icon $hover={$hover} onClick={this.handleClick} {...interpolated}/>
  }
</Motion>

That works smooth and fast at start but after a few hover, animation gets more and more laggy.

I probably miss something crucial here

sebap
  • 1,601
  • 5
  • 24
  • 41

0 Answers0