Split Text Animation Using NG-GX-SPLIT-TEXT

Introduction:

NG-GX-SPLIT-TEXT – This is an Angular utility to split text into words, lines or chars for subsequent animations.

ng-gx-split-text is an Angular component that split the text into words, characters, and/or lines for further use. The text may be animated in a sequence by individually animating each character.

Install ng-gx-split-text

npm install ng-gx-split-text --save

Import NgGxSplitTextModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgGxSplitTextModule } from 'ng-gx-split-text';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgGxSplitTextModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add directive to HTML

<p #text ngGxSplitText>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet consequuntur culpa
  delectus, doloribus exercitationem ipsam, laudantium molestiae non numquam odit omnis optio praesentium quae ratione
  similique sit soluta voluptatem?</p>

Add @ViewChild

@ViewChild('text', {static: true, read: NgGxSplitTextDirective}) text!: NgGxSplitTextDirective;

Update HTML file

<div class="text">
    <p #text ngGxSplitText>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet consequuntur culpa
        delectus, doloribus exercitationem ipsam, laudantium molestiae non numquam odit omnis optio praesentium quae ratione
        similique sit soluta voluptatem?</p>
        
</div>
<div class="text">
    <p #text1 ngGxSplitText>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet consequuntur culpa
        delectus, doloribus exercitationem ipsam, laudantium molestiae non numquam odit omnis optio praesentium quae ratione
        similique sit soluta voluptatem?</p>
        
</div>

app.component.ts file

import { Component, ViewChild } from '@angular/core';
import gsap from 'gsap';
import { NgGxSplitTextDirective } from 'ng-gx-split-text';
import * as _ from 'lodash';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('text', {static: true, read: NgGxSplitTextDirective}) text!: NgGxSplitTextDirective;
  @ViewChild('text1', {static: true, read: NgGxSplitTextDirective}) text1!: NgGxSplitTextDirective;
  
  tlText = new TimelineMax();
  tlText1 = new TimelineMax();
  title = 'gsap-animation';
  ngOnInit(): void {  
  }
  
 ngAfterViewInit(): void {
    this.textAnimation();
    this.textThreeInitAnimation();
  }
 
  textAnimation() {
    this.tlText
      .to(this.text.words, 0.8, {
        opacity: 0,
      })
      .staggerFromTo(this.text.words, 0.5, {
        opacity: 0,
        x: () => {
          return _.random(-100, 100);
        },
        y: () => {
          return _.random(-100, 100);
        },
        rotation: () => {
          return _.random(-25, 25);
        },
        immediateRender: false,
      }, {
        opacity: 1,
        x: 0,
        y: 0,
        rotation: 0,
      }, 0.05);
  }
  textThreeInitAnimation() {
    const text = this.text1;
    const tlText = this.text1.words;
    const multiply = 0.65;

    text.lineChars.forEach((chars, index) => {
      this.tlText1
        .to(chars, 0.5, {
          opacity: 0
        }, 0)
        .staggerFromTo(chars, 0.5 * multiply, {
          opacity: 0,
          x: 10,
          y: 30,
          rotation: -10,
          skewX: 30
        }, {
          opacity: 1,
          x: 0,
          y: 0,
          rotation: 0,
          skewX: 0,
          immediateRender: false,
          ease: Back.easeOut.config(5)
        }, 0.025 * multiply);
    });
  }

}

Output: