I am working on a React application that includes an icon positioned on a Leaflet map. The icon has a value ranging from 0 to 359 to represent its current direction.
My goal is to use transform: rotate(Xdeg) to rotate the icon and implement a smooth animation using transition.
However, I encountered an issue where when the value reaches either 0 or 360, the transition occurs in the opposite direction.
Is there a way to smoothly transition a box with transform: rotate(340deg) to transform: rotate(10deg) in a clockwise rotation?
Check out an example on CodePen here
const App = () => {
const [rotation, setRotation] = React.useState(340);
return (
<div id="wrapper">
<div>
<div className="box-wrapper">
{/* Dynamic CSS transform for rotating the box */}
<div className="box" style={{ transform: `rotate(${rotation}deg)` }}>
<span>{ `Rotation: ${rotation}deg` }</span>
</div>
</div>
</div>
<div>
<button onClick={() => setRotation((rotation + 10) % 360)}>+10 deg</button>
<button onClick={() => setRotation(((360 + (rotation - 10)) % 360))}>-10 deg</button>
<button onClick={() => setRotation(340)}>340 deg</button>
<button onClick={() => setRotation(20)}>20 deg</button>
</div>
</div>
)
}