How to optimize drag animation (useState + transform: translate) - css

Question

i have a Card component, which is draggable on mobile devices. on touch start it saves the initial point, on touch move it updates the current point state and on touch end it restores points and makes some logic with the swipe direction. it works fine when is testing on desktop but on mobile it is very sharp. how can i optimize drag animation so it works smooth?
i use "dragging" key to smooth relocate card on initial position if the distance is small
const Card = ({screens, title, overview, release_date, onSwipe}: props) => {
const [initialPoint, setInitialPoint] = useState({x: 0, y: 0})
const [currentPoint, setCurrentPoint] = useState({x: 0, y: 0})
const [dragging, setDragging] = useState(false)
const [currentStep, setCurrentStep] = useState(0)
const touchStartHandler = (e: React.TouchEvent) => {
setDragging(true)
setInitialPoint({
x: e.touches[0].pageX,
y: e.touches[0].pageY
})
setCurrentPoint({
x: e.touches[0].clientX,
y: e.touches[0].clientY
})
}
const touchMoveHandler = (e: React.TouchEvent) => {
setCurrentPoint({
x: e.touches[0].clientX,
y: e.touches[0].clientY
})
}
const touchEndHandler = () => {
if(currentPoint.x - initialPoint.x === 0) {
if(currentPoint.x > window.screen.width / 2) {if(currentStep < screens.length - 1) setCurrentStep(x => x + 1)}
else if(currentStep > 0) setCurrentStep(x => x - 1)
}
setDragging(false)
setCurrentPoint({x: 0, y: 0})
}
useEffect(() => {
preload(screens)
}, [screens])
return (
<div
style={{
transform: `translate(${currentPoint.x - initialPoint.x}px, ${currentPoint.y - initialPoint.y}px) rotate(${(window.screenX - currentPoint.x + initialPoint.x)/45}deg)`,
transition: dragging ? '0s' : '200ms'
}}
onTouchStart={touchStartHandler}
onTouchMove={touchMoveHandler}
onTouchEnd={touchEndHandler}
className={`w-[100%] h-[100%] box-border rounded-2xl absolute overflow-hidden bg-black`}
>
<div style={{backgroundImage: `url('${screens[currentStep]}')`}} className={'w-[120%] h-[120%] box-border rounded-2xl bg-black bg-cover bg-center blur-lg absolute left-[-10%] top-[-10%] opacity-50'}/>
<Stamps currentPoint={currentPoint} initialPoint={initialPoint}/>
<div className={'bg-contain bg-center bg-no-repeat h-full absolute w-full top-0 rounded-2xl'} style={{backgroundImage: `url('${screens[currentStep]}')`}}/>
<Counter current={currentStep} total={screens.length}/>
<div
className={'bg-rose-100 absolute bottom-0 rounded-2xl w-full text-black p-4'}>
<div className={'font-bold text-3xl'}>{title}</div>
<div className={'mt-2 font-medium'}>{release_date.split('-')[0]}, комедия, триллер</div>
<div className={'leading-4 mt-2 max-h-20 overflow-hidden relative'}>
{overview}
<div className={'bg-gradient-to-b from-transparent to-rose-100 absolute w-full h-full max-h-20 top-0'}/>
</div>
<div className={'text-lg font-medium underline'}>Полностью на themoviedb.org</div>
</div>
</div>
);
};
const Stamps = ({currentPoint, initialPoint}: {currentPoint: point, initialPoint: point}) => {
return (
<>
<div style={{opacity: (currentPoint.x - initialPoint.x - 50) / window.screen.width * 6}}
className={'font-bold text-green-400 text-4xl absolute top-28 z-30 border-4 border-green-400 p-4 rounded-2xl rotate-[35deg] left-12'}>НРАВИТСЯ</div>
<div style={{opacity: (-currentPoint.x + initialPoint.x - 50) / window.screen.width * 6}}
className={'font-bold text-red-400 text-4xl absolute top-28 z-30 border-4 border-red-400 p-4 rounded-2xl -rotate-[35deg] right-12'}>НУ ТАКОЕ</div>
<div style={Math.abs(currentPoint.x - initialPoint.x) < 50 ? {opacity: (-currentPoint.y + initialPoint.y - 50) / window.screen.height * 6} : {opacity: 0}}
className={'font-bold text-blue-400 text-4xl absolute bottom-56 z-30 border-4 border-blue-400 p-4 rounded-2xl -rotate-12 right-16'}>ПОСМОТРЮ</div>
<div style={Math.abs(currentPoint.x - initialPoint.x) < 50 ? {opacity: (currentPoint.y - initialPoint.y - 50) / window.screen.height * 6} : {opacity : 0}}
className={'font-bold text-gray-400 text-4xl absolute top-28 z-30 border-4 border-gray-400 p-4 rounded-2xl rotate-12 right-8'}>ПРОПУСТИТЬ</div>
</>
);
};
const Counter = ({current, total}: props) => {
const a = new Array(total).fill(false)
return (
<div className={'flex flex-row gap-4 h-5 pt-4 px-4 z-10 absolute top-0 w-full box-border'}>
{a.map((_, i) => {
if(i === current) return <div key={`active-${i}`} className={'bg-gradient-to-br from-[#FDABDD] to-[#374A5A] rounded-full flex h-full w-full'}/>
else return <div key={`passive-${i}`} className={'bg-rose-50 rounded-full flex h-full w-full'}/>
})}
</div>
);
};
also there is no more than 2 cards displayed in one time

Answer 1

lol, i just tried to add to Card class "will-change-transform" and it boosted my animation to 60 fps