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