Hello to everyone.
I’m trying to make a transition component inside a div and change component content with gestures. But happens that the gestures are not smooth, when deltaX is negative, it does not change component, either enter on the condition.
useEffect(() => {
let first = first_drawerRef.current
const firstGesture = createGesture({
el: first!,
gestureName: 'my-div-swiper',
threshold: 0,
direction: 'x',
onMove: (event) => {
console.log("OI")
setMessage(`counter: ${counter}
positionX: ${event.currentX}
deltaX: ${event.deltaX}
Velocity: ${event.velocityX}
RelativeCenterPosition: ${(-window.innerWidth) + (window.innerWidth / 2) + event.currentX}`)
setRPosition((-window.innerWidth) + (window.innerWidth / 2) + event.currentY)
// first!.style.transform = `translateY(${event.velocityY+event.deltaY }px)`
first!.style.transform = `translateX(${event.velocityX+event.deltaX*0.0001 }px)`
if (event.deltaX <= -100 && event.deltaX >= -101 && event.velocityX < 0) {
if(canChange) {
console.log("OI2")
setCounter(counter+1)
setCanchange(false)
setElemento(menus.props[counter].elemento)
setTimeout(()=>{;setCanchange(true)}, 1000)
setCanchange(false)
if (counter >= menus.props.length-1){
setCounter(menus.props.length-1)
}
}
}if (event.deltaX >= 100 && event.deltaX >= 101 && event.velocityX > 0) {
// console.log("OI2")
if(canChange) {
console.log("OI3")
setCounter(counter-1)
setCanchange(false)
setElemento(menus.props[counter].elemento)
setTimeout(()=>{setCanchange(true)}, 1000)
setCanchange(false)
if (counter <= 0){
setCounter(0)
}
}
}
}
})
firstGesture.enable(true)
})
Could someone help me solve that? The console prints “OI3” But does not “OI2”.
Edit: When i remove event.velocityX < 0 - the deltaX negative triggers better, but still fails most of time.
Edit2: I need to re-run yarn start in every change i made on createGesture.