Animate card to move up and down in Ionic

Question

I want to be able to move a card up and down but the only examples I find is of card moving side to side.

This is what I have. An example I found in the ionic documentation site Ionic animation

home.page.ts

 private animation?: Animation;
 private gesture?: Gesture;

 private started: boolean = false;
 private initialStep: number = 0;
 private MAX_TRANSLATE: number = 200;

 @ViewChild('square', { read: ElementRef }) square: ElementRef;

 constructor(
  private animationCtrl: AnimationController,
  private gestureCtrl: GestureController
 ) {}

 ionViewDidEnter() {
 
  this.animation = this.animationCtrl
    .create()
    .addElement(this.square.nativeElement)
    .duration(1000)
    .fromTo(
      'transform',
      'translateX(0)',
      `translateX(${this.MAX_TRANSLATE}px)`
    );

  this.gesture = this.gestureCtrl.create({
    el: this.square.nativeElement,
    threshold: 0,
    gestureName: 'square-drag',
    onMove: (ev) => this.onMove(ev),
    onEnd: (ev) => this.onEnd(ev),
  });

  this.gesture.enable(true);

}

private onMove(ev) {
 if (!this.started) {
  this.animation.progressStart();
  this.started = true;
 }

 this.animation.progressStep(this.getStep(ev));
}

private onEnd(ev) {
 if (!this.started) {
  return;
 }

 this.gesture.enable(false);

 const step = this.getStep(ev);
 const shouldComplete = step > 0.5;

 this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
   this.gesture.enable(true);
 });

 this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
 this.started = false;
}

  private clamp(min, n, max) {
   return Math.max(min, Math.min(n, max));
  }

  private getStep(ev) {
    const delta = this.initialStep + ev.deltaX;
    return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
  }

I tried using translateY instead of translateX, it didn't work.

home.page.html

<ion-header>
 <ion-toolbar>
  <ion-title>home</ion-title>
 </ion-toolbar>
</ion-header>

<ion-content>
 <div class="container">
  <h1>This is my body</h1>
 </div>

  <ion-card #square>
    card content
  </ion-card>
 </ion-content>

how can I change the direction of the card from side to side, to up and down?