Swipe in Swipe Out Button using Ionic Animation and Gesture

HI all i am using swipe in Swipe out option for Mark attendance in my app. I am using Ionic Animation And Gesture. It is working fine when i am on the page swipe in or out. But if i Swipe in and not doing swipe out and close the application and open again the button position again comes to in. here is my ts and html code

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  QueryList,
  AfterViewInit,
  NgZone
} from "@angular/core";

import "@capacitor-community/camera-preview";
import { Animation, Gesture, GestureController } from "@ionic/angular";
import { AnimationController } from "@ionic/angular";

@Component({
  selector: "app-firstpage",
  templateUrl: "./firstpage.page.html",
  styleUrls: ["./firstpage.page.scss"]
})
export class FirstpagePage implements AfterViewInit {
  @ViewChild("square", { read: ElementRef }) square: ElementRef;

  private gesture?: Gesture;

  private animation?: Animation;
  private started: boolean = false;
  private initialStep: any;
  private MAX_TRANSLATE: number;
  image = null;
  cameraActive = false;
  address: any;
  address1: any;
  width: any;
  longPressActive: boolean = false;
  swipeInButton: boolean;
  swipeOutButton: boolean;
  shouldComplete: boolean;
  constructor(
    private animationCtrl: AnimationController,
    private gestureCtrl: GestureController,
    private zone: NgZone
  ) {}

  ngAfterViewInit() {}
  ionViewWillEnter() {
    if (localStorage.getItem("swipeInOut")) {

      this.swipeInButton = false;
      this.swipeOutButton = true;
      this.zone.run(()=>{
        // this.animation.progressStep(1);
   this.initialStep = localStorage.getItem('initialStep');
        
    // progressEnd(playTo: 0 | 1 | undefined, step: number, dur?: number): void;
        // this.animation.progressEnd(1, 1,1000)
      })
   
      console.log("inside if localstorage", localStorage.getItem("swipeInOut"));

    }
     else {
      console.log("inside else localStorage");
      this.swipeInButton = true;
      this.swipeOutButton = false;
      
      this.initialStep = localStorage.getItem('initialStep');
    
    }
    let el = document.querySelector(".track");
    console.log("el width", el.clientWidth);
    this.MAX_TRANSLATE = el.clientWidth - 60;
    // let button = document.querySelector(".in");
        
    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);
        console.log('onMove',ev)
      },
      onEnd: ev => {
        this.onEnd(ev);
        console.log('on End',ev)
      }
    });

    this.gesture.enable(true);
  }

  private onMove(ev) {
    // if (!this.started) {
      this.animation.progressStart(true, this.MAX_TRANSLATE);
      // 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);
    console.log("step", step);
    const shouldComplete = step > 0.5;
    this.animation.progressEnd(shouldComplete ? 1 : 0, step);
    this.animation.onFinish(() => {
      this.gesture.enable(true);
      this.zone.run(() => {
        if (shouldComplete) {
          console.log("inside run");
          localStorage.setItem("swipeInOut", "true");
          this.swipeInButton = false;
          this.swipeOutButton = true;
          this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
          console.log('this.initialStep if',this.initialStep);
          localStorage.setItem('initialStep',this.initialStep)
          // this.started = false;
        } else {
          console.log("inside run else");
          localStorage.setItem("swipeInOut", "false");
          this.swipeInButton = true;
          this.swipeOutButton = false;
          this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
          
          localStorage.setItem('initialStep',this.initialStep)
          console.log('this.initialStep eklse',this.initialStep);
          
          // this.started = false;
        }
      });
    });
    // this.animation.onFinish()
    // 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);
  }
}



and html code 
 <div class="track"  >
    <div>
        <ion-text style="position: absolute;top:20px;right:30px;" *ngIf="swipeInButton">  Swipe to CLOCK IN</ion-text>
        <ion-text style="position: absolute;top:20px;left:30px;" *ngIf="swipeOutButton">  Swipe to CLOCK OUT</ion-text>
        <div>
        <ion-button class="in"  color="light" expand="block" #square>
          <ion-icon slot="icon-only" name="arrow-forward-outline" color="dark" *ngIf="swipeInButton">IN</ion-icon>
          <ion-icon slot="icon-only" name="arrow-back-outline" color="dark" *ngIf="swipeOutButton">OUT</ion-icon>
        </ion-button>
      
    </div>
    </div>

swipe