Adding little pause when moving image reaches symmetry conditions
Unanswered
Californian posted this in #help-forum
CalifornianOP
Hello, I'm moving a Next Image through a page. The movement happens when dragging an icon attached to the image. I'm not showing it for simplicity but the important piece of the component looks like the following:
I want to give a little pause in the movement once the image reaches symmetry conditions. For that, I'm currently trying with the following
This idea with
...
<div
className="absolute"
style={{
top: `${translations[index].y}px`,
left: `${translations[index].x}px`,
}}
>
<Image
src={image.url}
width={image.dimensions.width}
height={image.dimensions.height}
style={getImageStyle(index)}
alt="Moving Image"
/>
...
</div>
I want to give a little pause in the movement once the image reaches symmetry conditions. For that, I'm currently trying with the following
getImageStyle
function: const getImageStyle = (index: number): CSSProperties => {
const { width, height } = ...
const isSymmetric = checkSymmetry(index);
// It does not work, need to find another solution
return {
width: width + 'px',
height: height + 'px',
transition: `width ${isSymmetric ? 0.3 : 0.1}s ease, height ${isSymmetric ? 0.3 : 0.1}s ease`,
transitionDelay: isSymmetric ? '0.3s' : '0s',
};
};
This idea with
transition
and transitionDelay
is currently not working. There is no little pause when the image reaches symmetry conditions. Any idea on how to create this little pause ?