Ionic 5 Animation issue with gesture

@Jinfreeks wrote:

I have a problem with an animation, I want to display a div on slide up, and I use gesture to give the impression that the user have to drag it.

But when we release the div (on end of touch event), the animation event seems to start at an different point than the one I indicated.

I’m unable right now to recreate my issue with a JSFiddle, but I’ve create a short video (Just the first 3sec, I recommend to read it at x0.25) : https://youtu.be/z50BDjhKDh4

This is my code :

ionViewDidEnter() {
   this.gesture = this.gestureCtrl.create({
     el: this.source.nativeElement,
     threshold:10,
     gestureName: 'show-profile',
     gesturePriority:100,
     disableScroll:true,
     direction:'y',
     onStart: (detail) => { 
       this.onStart(detail); 
     },
     onMove: (detail) => { 
       this.onMove(detail); 
     },
     onEnd: (detail) => {
       this.onEnd(detail);
     }
   })

   this.profileGest = this.gestureCtrl.create({
     el: this.description.nativeElement,
     threshold:10,
     gestureName: 'hide-profile',
     gesturePriority:10,
     disableScroll:true,
     direction:'y',
     onStart: (detail) => { 
       this.onStartProfile(detail); 
     },
     onMove: (detail) => { 
       this.onMoveProfile(detail); 
     },
     onEnd: (detail) => {
       this.onEndProfile(detail);
     }
   })

   this.gesture.enable();

   this.bounceInUp = this.animationCtrl.create()
   .addElement(this.description.nativeElement)
   .duration(400)
   .keyframes([
     { offset: 0, transform: 'translateY(' + this.profilePeak + 'px)' },
     { offset: 0.6, transform: 'translateY(-300px)' },
     { offset: 0.7, transform: 'translateY(-270px)' },
     { offset: 0.9, transform: 'translateY(-285px)' },
     { offset: 1, transform: 'translateY(-280px)' }
   ])
   .beforeStyles({'transform':'translateY(' + this.profilePeak + 'px)'})
   .afterStyles({'transform':'translateY(-280px)'})

   this.headerDown = this.animationCtrl.create()
   .addElement(this.header.nativeElement)
   .duration(400)
   .keyframes([
     { offset: 0, transform: 'translateY(' + this.headerPeak + 'px)' },
     { offset: 0.6, transform: 'translateY(20px)' },
     { offset: 0.7, transform: 'translateY(-10px)' },
     { offset: 0.9, transform: 'translateY(5px)' },
     { offset: 1, transform: 'translateY(0px)' }
   ])
   .beforeStyles({'transform':'translateY(' + this.headerPeak + 'px)'})
   .afterStyles({'transform':'translateY(0px)'})

   this.fallDown = this.animationCtrl.create()
   .addElement(this.description.nativeElement)
   .duration(400)
   .fromTo('transform', 'translateY(' + this.profilePeak + 'px)', 'translateY(0px)')
   .afterStyles({'transform':'translateY(0px)'})

   this.headerUp = this.animationCtrl.create()
   .addElement(this.header.nativeElement)
   .duration(400)
   .fromTo('transform', 'translateY(' + this.headerPeak + 'px)', 'translateY(-80px)')
   .afterStyles({'transform':'translateY(-80px)'})

   this.minimizeImg = this.animationCtrl.create()
   .addElement(this.source.nativeElement)
   .duration(400)
   .fromTo('height', 'translateY(' + this.headerPeak + 'px)', 'translateY(-80px)')
   .afterStyles({'transform':'translateY(-80px)'})

   this.maximizeImg = this.animationCtrl.create()
   .addElement(this.source.nativeElement)
   .duration(400)
   .fromTo('transform', 'translateY(' + this.headerPeak + 'px)', 'translateY(-80px)')
   .afterStyles({'transform':'translateY(-80px)'})

 }

onStart(detail:any){
   console.log(detail.deltaY);
   this.profilePeak = detail.deltaY;
   this.headerPeak = (-80) + (Math.abs(detail.deltaY) / 3);
 }

 onMove(detail:any) {
   console.log(this.fullProfile, detail.deltaY);
   var headerPosi = (-80) + (Math.abs(detail.deltaY) / 3);
   this.profilePeak = detail.deltaY;
   console.log('ici',this.profilePeak);
   this.renderer.setStyle(this.description.nativeElement,'transform','translateY(' + detail.deltaY + 'px)');
   this.renderer.setStyle(this.header.nativeElement,'transform','translateY(' + headerPosi + 'px)');
 }

 onEnd(detail:any){
   this.renderer.setStyle(this.description.nativeElement,'transition','0,4s ease-out');
   this.renderer.setStyle(this.header.nativeElement,'transition','0,4s ease-out');
   if(detail.deltaY > (-100)){
     console.log("OnEnd");
     this.renderer.setStyle(this.description.nativeElement,'transform','translateY(0px)');
     this.renderer.setStyle(this.header.nativeElement,'transform','translateY(-80px)');
   } else if(detail.deltaY <= (-100)){
     this.headerPeak = (-80) + (Math.abs(detail.deltaY) / 3);
     console.log("goUPPPPP",this.profilePeak);
     this.gesture.enable(false);
     this.valuePassed();
     this.bounceInUp.play();
     this.headerDown.play();
     setTimeout (() => {
       this.bounceInUp.stop();
       this.headerDown.stop();
       this.profileGest.enable();
     }, 600);
   }
 }

 onStartProfile(detail:any){
   this.profilePeak = detail.deltaY;
   this.headerPeak = 80 - (detail.deltaY / 3);
 }

 onMoveProfile(detail:any){
   if(detail.deltaY >= 0){
     var headerPosi = 0 - (detail.deltaY / 3);
     var descriptionPosi = -280 + detail.deltaY;
     this.renderer.setStyle(this.description.nativeElement,'transform','translateY(' + descriptionPosi + 'px)');
     this.renderer.setStyle(this.header.nativeElement,'transform','translateY(' + headerPosi + 'px)');
   } else if(detail.deltaY < 0){
     var descriptionPosi = -280 + detail.deltaY;
     this.renderer.setStyle(this.description.nativeElement,'transform','translateY(' + descriptionPosi + 'px)');
   }
 }

 onEndProfile(detail:any){
   this.renderer.setStyle(this.description.nativeElement,'transition','0,4s ease-out');
   this.renderer.setStyle(this.header.nativeElement,'transition','0,4s ease-out');
   if(detail.deltaY > 50){
     this.profilePeak = -280 + detail.deltaY;
     this.headerPeak = 80 - (detail.deltaY / 3);
     console.log("FallDown Values", this.profilePeak, this.headerPeak);
     this.profileGest.enable(false);
     this.fallDown.play();
     this.headerUp.play();
     setTimeout (() => {
       this.fallDown.stop();
       this.headerUp.stop();
       this.gesture.enable();
    }, 500);
   } else if(detail.deltaY <= 50){
     console.log("OnEnd");
     this.renderer.setStyle(this.description.nativeElement,'transform','translateY(-280px)');
     this.renderer.setStyle(this.header.nativeElement,'transform','translateY(0px)');
   }
 }

I’m pretty sure that I’ve done a ridiculous error, but I’m newbie at create animation so I need your help !

Thank you all folks !

PS : I’ve already post it in StackOverFlow, it’s useless to mention it.

Posts: 1

Participants: 1

Read full topic