[Issue removing/kill ScrollTrigger]

this solution works with angular spa 

 

[Angular routing - scrolltrigger not creating when getting back to page component]

you need to wrap your function in a setTimeout func.

"Invoking setTimeout with a callback, and zero as the second argument will schedule the callback to be run asynchronously, after the shortest possible delay - which will be around 10ms and the JavaScript thread of execution is not busy."

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

import {gsap } from 'gsap';

import ScrollTrigger from 'gsap/ScrollTrigger';

gsap.registerPlugin( ScrollTrigger );

@Component({

  selector: 'app-our-community',

  templateUrl: './our-community.component.html',

  styleUrls: ['./our-community.component.scss']

})

export class OurCommunityComponent implements OnInit {

 

  communtyAnimation: any

 

  constructor() { }

 

  ngOnInit(): void {

    setTimeout(() => {

      this.communtyAnimation = this.createAnime()

    }, 0);

  }

 

  createAnime() {

    gsap.to(".community-title", {

      scrollTrigger: {

        trigger: ".community-style",

        start: "top center",

        end: "bottom center",

        toggleActions: "restart reverse restart reverse",

      },

      y: 0,

      ease: "power1.out",

      delay: 0.3,

    });

    gsap.to(".community-img" ,{

      scrollTrigger: {

        trigger: ".community-style",

        start: "top center",

        end: "bottom center",

        toggleActions: "restart reverse restart reverse",

      },

      rotate: 0,

      ease: "power1.out",

      delay: 0.3,

    })

  }

}