Awesome Page Transitions in Angular

In today’s world just having a website is not enough. Firstly, The website should have a clean UI. Secondly, it should be intuitive. Lastly and most importantly, there should be some interactive element.

Interactivity keeps the users glued on your site for a longer period. As a result, it increases the chance of converting a user to a customer. Also, longer interaction time leads to lower bounce rate and hence ranking higher in search engines.

One of the most common and basic form of interaction happens when a user scrolls on your website. Wouldn’t it be quite boring if the user keeps on scrolling through your long static page? In this tutorial we will have a look at 3 basic animations that can happen on scroll. Parallax, Fade & Slide animations are the most popular animations used. Let’s see how we can achieve these animations.

Parallax (View Demo)

Fade (View Demo)

Slide (View Demo)

PROJECT SETUP

Prerequisites

We will be using Angular 11 to create our project. This tutorial can be useful for Vanilla HTML, CSS, JS projects as well.

In order to achieve animations we are going to use the fabulous Green Sock Animation Platform (gsap). It’s one of the best javascript animation library out there.

Create Project and Setup

Create an Angular project by executing the below command. Note: Make sure to enable routing when asked.

ng new animations --style css
code animations 

This will create a new project named animations with style format as CSS. Secondly, it will open the project in VS Code. Next, let’s install gsap. In the VS Code terminal execute the below command.

npm install --save gsap @types/gsap 

This will install the gsap library and and the typing files via @types/gsap.

Lastly, let’s create 3 components. Execute the below commands.

ng g c parallax
ng g c fade
ng g c slide 

Set Up Routes

Let’s create 3 separate routes /parallax, /fade, and /scroll. Open your app-routing.module.ts and add the routes as below.

import { NgModule } from '@angular/core';
import { FadeComponent } from './fade/fade.component';
import { SliderComponent } from './slider/slider.component';
import { ParallaxComponent } from './parallax/parallax.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'parallax',
    component: ParallaxComponent
  },
  {
    path: 'slide',
    component: SliderComponent
  },
  {
    path: 'fade',
    component: FadeComponent
  }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 

PARALLAX ANIMATION

Since we have now setup the project, let’s start with the parallax animation.

While creating page animations, sections are usually used. So, open your parallax.component.html file and paste in the below code.

<section>
  <div class="bg"></div>
  <h1>THIS IS MY FIRST PARALLAX SECTION</h1>
</section>
<section>
  <div class="bg"></div>
  <h1>GREAT THAT IT'S WORKING</h1>
</section>
<section>
  <div class="bg"></div>
  <h1>SCROLL MORE TO SEE MORE</h1>
</section>
<section>
  <div class="bg"></div>
  <h1>LOVING THE IMAGES</h1>
</section>
<section>
  <div class="bg"></div>
  <h1>NICE, RIGHT?</h1>
</section> 

Let’s add some styling to these sections. Since, we are going to use sections in all 3 components we will add styling to the common styles.css file. Open your styles.css file and paste in the below CSS.

html,
body {
    margin: 0 !important;
}

section {
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 1px 1px 3px black;
    font-size: 3em;
    font-weight: 400;
} 

Above, we are making the height & width of the section equal to the viewport’s height and width. Secondly, we are aligning contents in the center of the section. Lastly, we are setting the font style for how the text will be displayed.

Since, the bg class used in parallax.component.html is specific to parallax we will define it’s properties in parallax.component.css. Open that file and paste the below CSS.

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} 

In order to set the parallax animation we need to add some typescript code. So, open your parallax.component.ts file and add the below code in your ngOnInit function.

// Register the ScrollTrigger plugin with gsap
gsap.registerPlugin(ScrollTrigger);

//Loop over all the sections and set animations
gsap.utils.toArray("section").forEach((section: any, i) => {
  
  // Set the bg variable for the section
  section.bg = section.querySelector(".bg");

  // Give the backgrounds some random images
  section.bg.style.backgroundImage = `url(https://picsum.photos/${innerWidth}/${innerHeight}?random=${i})`;

  // Set the initial position for the background
  section.bg.style.backgroundPosition = `50% ${-innerHeight / 2}px`;

  // Do the parallax effect on each section
  gsap.to(section.bg, {
    backgroundPosition: `50% ${innerHeight / 2}px`,
    ease: "none", // Don't apply any easing function.
    scrollTrigger: {
      // Trigger the animation as soon as the section comes into view
      trigger: section, 
      // Animate on scroll/scrub
      scrub: true
    }
  });
}); 

I have added inline comments for the explanation. Let me know in comments if you need any clarifications.

Finally, add the below imports at the top of your ts file so that you don’t get any compile time error.

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/all'; 

That’s it! You can now visit http://localhost:4200/parallax to see the beautiful animation like here.

FADE ANIMATION

For the fade animation open the fade.component.html file and paste the below html code

<section class="first">
    <h1>THIS IS MY FIRST FADE ANIMATION</h1>
</section>
<section>
    <h1>GREAT THAT IT'S WORKING</h1>
</section>
<section>
    <h1>SCROLL MORE TO SEE MORE</h1>
</section>
<section>
    <h1>LOVING THE IMAGES</h1>
</section>
<section>
    <h1>NICE, RIGHT?</h1>
</section> 

In the fade.component.css paste the below CSS.

section {
    position: fixed !important;
}

section:not(.first) {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
} 

We are going to display only one section at a time. So we are hiding all the sections except the first one. Also since we are not moving the sections along with the scroll, it’s position is marked as fixed.

Let’s add the animation code to make the other sections visible on scroll. Open the fade.component.ts file and .

import { Component, OnInit } from '@angular/core';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/all';

@Component({
  selector: 'app-fade',
  templateUrl: './fade.component.html',
  styleUrls: ['./fade.component.css']
})
export class FadeComponent implements OnInit {

  // To maintain which section is being displayed.
  currentSection: any;
  constructor() { }

  ngOnInit(): void {
    // Register the ScrollTrigger with gsap
    gsap.registerPlugin(ScrollTrigger);

    // Get an array of all the sections
    let sections = gsap.utils.toArray("section");

    //Set the first section as the current section
    this.currentSection = sections[0];

    // Stretch out the body height according to however many sections there are. 
    gsap.set("body", { height: (sections.length * 100) + "vh" });

    
    // loop over section to create animations
    sections.forEach((section: any, i) => {
      // Set the background for each section
      section.style.backgroundImage = `url(https://picsum.photos/${innerWidth}/${innerHeight}?random=${i})`;

      // create a ScrollTrigger for each section
      gsap.to(section, {
        scrollTrigger: {

          // use dynamic scroll positions based on the window height
          start: () => (i - 0.5) * innerHeight,
          end: () => (i + 0.5) * innerHeight,

          // when a new section activates (from either direction), set the section accordinglyl.
          onToggle: self => self.isActive && this.setCurrentSection(section)
        }
      });
    });
  }

  // Animates the new section and updates the current section
  setCurrentSection(newSection: any) {
    if (newSection !== this.currentSection) {
      // Hide the current section by fading out
      gsap.to(this.currentSection, { scale: 0.8, autoAlpha: 0 })
      
      // Display the current section by fading in
      gsap.to(newSection, { scale: 1, autoAlpha: 1 });
      
      // Update the current section.
      this.currentSection = newSection;
    }
  }
} 

I have added inline comments so as the code to be self explanatory. For any clarity please comment below.

Visit http://localhost:4200/fade to see the smooth fading animation as you scroll. You can view the demo here.

Slide Animation

This is the easiest of the lot to understand and implement. Open your slide.component.html file and paste the below code. It’s almost similar to fade.component.html except the class is removed on the first section.

<section>
    <h1>THIS IS MY FIRST SLIDE ANIMATION</h1>
</section>
<section>
    <h1>GREAT THAT IT'S WORKING</h1>
</section>
<section>
    <h1>SCROLL MORE TO SEE MORE</h1>
</section>
<section>
    <h1>LOVING THE IMAGES</h1>
</section>
<section>
    <h1>NICE, RIGHT?</h1>
</section> 

No CSS needs to be added. So, next open the slide.component.ts file and add the below code.

import { Component, OnInit } from '@angular/core';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/all';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

  constructor() { }
  ngOnInit() {
    // Register the ScrollTrigger with gsap
    gsap.registerPlugin(ScrollTrigger);

    //Loop over all the sections and set animations
    gsap.utils.toArray("section").forEach((section: any, i) => {

      // Give the backgrounds some random images
      section.style.backgroundImage = `url(https://picsum.photos/${innerWidth}/${innerHeight}?random=${i})`;


      gsap.to(section, {
        scrollTrigger: {
          // Trigger the animation as soon as the section comes into view
          trigger: section,
          
          // Pin the section to give a feeling like slide for next section
          pin: true,

          // Remove the extra pin space added by default
          pinSpacing: false
        }
      });
    });
  }
} 

And, again I have added the inline comments for better understanding of code.

Open http://localhost:4200/slide to see some mesmerising slide animation as you scroll. You can view the demo here.

Conclusion

Animations add a lot value in keeping the user on the website. As with all things, keep the use animations within limit. Don’t clutter or mess up the website with heavy images and funky animation. Keep It Simple & Keep It Subtle (KIS & KIS).

In this tutorial we saw how to add simple parallax, fade, and slide animations for page sections. Do you have any great animations in mind or any website with awesome animations. Let me know in comments below.

If you have like this, you might also like the below articles:

1. Lazy Loading Modules in Angular

2. .NET 5: How to Authenticate & Authorise API’s correctly

3. Learn TDD with Integration Tests in .NET 5.0

Note: You can find the whole project on GitHub.

#animation #gsap