gsap animation plays only once when I put it inside angular ngOnInit function

Question

I have an angular 7 project and imported Gsap library. I want an animation to be played every time I navigate to a page so I've implemented the gsap animation inside ngOnInit, but the animation plays only for the first time I visit the page and in the next visits there is no animation. I've created a callback to log a message when the animation completes and every time I navigate to the page I can see the complete message is logged in the console but there is no animation. here is my ts code:

import { Component, OnInit } from "@angular/core";
import { TweenMax } from "gsap";
@Component({
  selector: "app-list",
  templateUrl: "list.page.html",
  styleUrls: ["list.page.scss"]
})
export class ListPage implements OnInit {
  ngOnInit() {
    TweenMax.to("#myTarget", 1, {
      y: -50,
      onComplete: function() {
        console.log("animation completed");
      }
    });
  }
}

thanks for help!

it makes no difference, I get the complete log message but animation plays only once — Ali Haghighi, Jan 27 '19 at 06:22
`TweenMax` call on every route or call only `list page`?. || try to add this code on appComponent and call on every route change — Abhishek, Jan 27 '19 at 06:22
the animation is specific to listPage. my problem is that the gsap animation gets called and the complete message gets fired but the animation does not play visually. — Ali Haghighi, Jan 27 '19 at 06:28

score 1 · Answer 1 · answered Jan 27 '19 at 06:46

actually, my code was working correctly! the problem source was having two identical ids #myTarget in the homePage and listPage and when navigating between these two pages the gsap was confused with 2 unique ids. so I changed the id to class and problem solved

gsap animation plays only once when I put it inside angular ngOnInit function

1 Answers1