I'm using CreateAnimation Component to animate my components in reverse direction. from within gestures(createGestures hook(custom), left and right method while swiping left and right).
const {ref, gesture }=useGesture ({
right :() =>{
if(animationref.current !==null){
animationref.current.setupAnimation({
duration:1000,
**direction:'normal',** //**Works fine**
fromTo:{
property:'transform',
fromValue: `translateX(-100%)`,
toValue:`translate(0)`
}
});
animationref.current.animation.play();
}
left :() =>{
if(animationref.current !==null){
animationref.current.setupAnimation({
duration:1000,
**direction:'reverse'** //**Reverse animation doesnt seem to work when applied through ref(works fine if directly applied in render**
fromTo:{
property:'transform',
fromValue: `translateX(-0)`,
toValue:`translate(100%)`
}
});
animationref.current.animation.play();
}
}
});
I've a component like :
return(
<IonPage ref={ref}>
<IonContent>
<CreateAnimation
ref ={animationref} >
<div className='myclass'>
<switch>
<Route path ={'/abc'}>
{ABC }
</Route>
<Route path ={'/def'}>
{DEF }
</Route>
<Route path ={'/ghi'}>
{GHI }
</Route>
</switch>
</div>
</CreateAnimation>
</IonPage>
</IonContent>
);`Preformatted text`
ionic/react:5.4.0
React: 17.0.1
1 post - 1 participant