Create an Animated Slides with I

• @Github

Starting the Ionic Project

> ionic start ionic3-slide-animation blank
> cd ionic3-slide-animation
> ionic serve -l

Building the Slides

Ionic makes starting the slides very easy by using ion-slides and individual ion-slide elements.

In the /src/pages/home/home.html template file, specify

<ion-content>
  <ion-slides pager (ionSlideDrag)="slideMoved()">
    <ion-slide>
      <div class="diag">
        <ion-icon ios="ios-analytics" md="md-analytics" color="primary" [@bounce]='state' (@bounce.done)="animationDone($event)"></ion-icon>
      </div>
      <div [@bounce]='state'>
        <h2>track your routine</h2>
        <p>whether it's sets, reps, weight used, you can track it all with our intuitive interface.</p>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="diag">
        <ion-icon ios="ios-trophy" md="md-trophy" color="primary" [@bounce]='state' (@bounce.done)="animationDone($event)"></ion-icon>
      </div>
      <div [@bounce]='state'>
        <h2>set personal goals</h2>
        <p>we're all in the gym for a reason: goals. set goals for diet and fitness.</p>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="diag">
        <ion-icon ios="ios-chatboxes" md="md-chatboxes" color="primary" [@bounce]='state' (@bounce.done)="animationDone($event)"></ion-icon>
      </div>
      <div [@bounce]='state'>
        <h2>chat with others</h2>
        <p>inspire and help each other reach fitness and diet goals.</p>
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

Styling the Slides

Visit /src/app/app.scss to define a couple global rulesets:

@import url('https://fonts.googleapis.com/css?family=Raleway:300,700');

ion-content {
    background-color: #EFEFEF !important;
    font-family:'Raleway';
}

Then, let's visit the /src/home/home.scss file and place:

page-home {
  .diag {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
    height: 66%;
    background: url('./../assets/imgs/whitebg.svg') no-repeat;
  }
  ion-icon {
    margin-top: 40%;
    font-size: 7em;
  }
  h2 {
    margin-top: 80% !important;
    font-weight: bold;
    font-size: 1em;
  }
  p {
    width: 80%;
    display: block;
    margin: 0 auto;
    font-size: .9em;
  }
  .swiper-pagination {
    bottom: 12% !important;
  }
  #skip {
    position: absolute;
    bottom: 20px;
    width: 100%;
    background: none !important;
    text-align: center;
    cursor: pointer;
    z-index: 5;
  }
}

Integrating Animation

Let's to make some adjustments in the /src/app/app.module.ts file:

// Other imports
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Add BrowserAnimationsModule to imports

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    BrowserAnimationsModule
]

Detecting Slide Change

Visit the /src/home/home.ts file and place:

import { Component, ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  animations: [
    trigger('bounce', [
      state('*', style({
        transform: 'translateX(0)'
      })),
      transition('* => rightSwipe', animate('700ms ease-out', keyframes([
        style({ transform: 'translateX(0)', offset: 0 }),
        style({ transform: 'translateX(-65px)', offset: 0.3 }),
        style({ transform: 'translateX(0)', offset: 1.0 })
      ]))),
      transition('* => leftSwipe', animate('700ms ease-out', keyframes([
        style({ transform: 'translateX(0)', offset: 0 }),
        style({ transform: 'translateX(65px)', offset: 0.3 }),
        style({ transform: 'translateX(0)', offset: 1.0 })
      ])))
    ])
  ]
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;
  state: string = '';

  constructor() { }

  slideMoved() {
    if (this.slides.getActiveIndex() >= this.slides.getPreviousIndex()) {
      this.state = 'rightSwipe';
    }
    else {
      this.state = 'leftSwipe';
    }
  }

  animationDone() {
    this.state = '';
  }

}

We define an animation called bounce and set a state to any with *. The transition will activate from any state to rightSwipe or leftSwipe, and we're using keyframes to bounce on the X axis.

We define a state property which we set to any value initially.

slideMoved() will be called when we attach another input of ionSlideDrag to the ion-slides element in the template. When called, we use an if statement to check whether or not a user is swiping a slide right or left. .getActiveIndex() is a method that tells us the current slide index number, and .getPreviousIndex() will obviously let us know the previous slide index. So, we can use this if statement to determine whether or not one is swiping left or right based on comparing the index numbers.

animationDone() is called when we attach an event binding of .done to one of the animated elements in the template.