Create awesome image transition effects in Angular

Example of a nice image transition

Using image-transition effects is a good way in order to emphasize images on a website. Unfortunately the transition effects, which can be created by using CSS are quite limited.

This is where the WEBGL library three.js comes into the game. By using the shader material and writing the image transition effects in the GLSL shader code, it is possible to create quite awesome transition effects.

Three.js in combination with shader material is great and the possibilities of things that can be done are quite limitless. But it has to be considered that creating those stuff is quite time-consuming.

For writing image transition effects by yourself you need intermediate knowledge of three.js for creating the scene and in addition you need to learn the GLSL (OpenGL Shading Language). In my experience this takes a while. But I don’t want to hold off anybody from learning on creating nice projects with WEBGL!

If you are interested in creating WEBGL projects just have a look on the three.js library and for learning GLSL I recommend reading The Book of Shaders.

Enough with the introduction, let’s get things done!

In order that everybody working on an Angular project can use image transition effects easily the ngx-acuw library on NPM exists, which provides image transition effects. To get it running you need to follow just 3 steps.

Step 1: Install ‘three.js’ as prerequisite and the library ‘ngx-acuw’

npm install three @angular/cdk ngx-acuw

Step 2: Import the ImageTransitionModule into the root module

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; 
import { ImageTransitionModule } from "ngx-acuw"; 
import { AppComponent } from "./app.component";
@NgModule({
  imports: [BrowserModule, FormsModule, ImageTransitionModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Create a string array containing the links to the images in your component (credits to David Clode on Unsplash for the pictures)

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
imageUrls: string[] = [
  'https://source.unsplash.com/-rBqHtL3YPg',
  'https://source.unsplash.com/MlaQmWvzRTw',
  'https://source.unsplash.com/Q-8jreAEa-4',
  'https://source.unsplash.com/XrO6WBflFRo'
]}

Step 3: Add the library-component lib-image-transition in html.

<div class="container" (click)="imageTransition.next()">
<lib-image-transition #imageTransition [imageUrls]="imageUrls" [autoPlay]="true"></lib-image-transition>
</div>

If you run your code now the images should already be shown with a nice transition effect. For sure the effect type can be changed and there are also parameters for changing the behavior of the effects.

For example the image transition type can be changed by setting the input property transitionType to ‘noise’.

<div class="container" (click)="imageTransition.next()">
<lib-image-transition #imageTransition [imageUrls]="imageUrls" [autoPlay]="true" transitionType="noise"></lib-image-transition>
</div>

All properties and methods can be found on the image-transition demo site of the ngx-acuw library.