title: How to change the transition animation of an app?
body: <p>I am developing an app in ionic 4 and this has a gallery section and that for now gives a user experience that leaves much to be desired.</p>
  
  <p>I would like to change the transition animation of an application to something more similar to Pinterest, does anyone know how to achieve this?</p>
  
  <p>I have found some repositories that achieved this in Swift and objectic C, but they are very old and I cannot make them compile well in the current versions of Xcode, to whom I leave the repositories that I found</p>
  
  <p><a href="https://github.com/xhzengAIB/PinterestAnimator" rel="nofollow noreferrer">https://github.com/xhzengAIB/PinterestAnimator</a></p>
  
  <p><a href="https://github.com/demonnico/PinterestSwift" rel="nofollow noreferrer">https://github.com/demonnico/PinterestSwift</a></p>
  
  <p>I would like to achieve this effect</p>
  
  <p>![Transition app Pinterest]<a href="https://camo.githubusercontent.com/fdae059a7511ddab4e3dfdf5337c1ab85f9e60e9/687474703a2f2f692e737461636b2e696d6775722e636f6d2f30666e43642e676966" rel="nofollow noreferrer">https://camo.githubusercontent.com/fdae059a7511ddab4e3dfdf5337c1ab85f9e60e9/687474703a2f2f692e737461636b2e696d6775722e636f6d2f30666e43642e676966</a></p>
  
  <p>![Transition app Pinterest]<a href="https://raw.githubusercontent.com/demon1105/ImagesLib/master/compressed.gif" rel="nofollow noreferrer">https://raw.githubusercontent.com/demon1105/ImagesLib/master/compressed.gif</a></p>
  
  <p>My gallery is nothing more than a list of images, which click on them are displayed in a modal.
  I can't think of any way to get this effect that I'm looking for.</p>
  
  <p>Galeria:</p>
  
  <pre><code>  &lt;div class="pins"&gt;
      &lt;div class="pin" *ngFor="let image of images" (click)="openPreview(image)"&gt;
        &lt;img [src]="image"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Galeria.page.ts:</p>
  
  <pre><code>  openPreview(img) {
      debugger;
      this.modalController.create({
        component:TiendaGaleriaModalPage,
        componentProps:{
          img:img
        }
      }).then(modal=&gt;modal.present())
    }
  </code></pre>
  
  <p>Preview:</p>
  
  <pre><code>&lt;ion-slides pager="true" [options]="slideOpts"&gt;
      &lt;ion-slide&gt;
        &lt;div class="swiper-zoom-container"&gt;
          &lt;img [src]="img"&gt;
        &lt;/div&gt;
      &lt;/ion-slide&gt;
    &lt;/ion-slides&gt;
  </code></pre>
  
  <p>Preview.page.ts:</p>
  
  <pre><code>ngOnInit() {
      this.img=this.navParams.get('img')
    }
  </code></pre>