Jump to content
Search Community

Angular scrollTrigger way down when changing page

olmo test
Moderator Tag

Recommended Posts

Hello, I am using Angular 9 with GSAP, however being a single page application I have to kill  the triggers each time I leave a page using

 

  const triggers = ScrollTrigger.getAll();
    if (triggers) {
      triggers.forEach((trigger) => {
        trigger.kill();
      })
    }

However, each time I come back to a page where I have my animations instantiated (OnInit) the animations gets correctly created however the triggers get translate way below the actual point where they are supposed to be.

 

This is the component part 

 

  constructor(private _gsapService: GsapService) { }

  ngOnInit(): void {
    this.fadeIn1();
    this.an1();    
    this.an2();
    this.an3();
    this.an4();
    this.an5();
    this.an6();
    this.pc();
    this.highLight();
    this.setItem();
    this.an7();
    this.an8();
    console.log(ScrollTrigger.getAll())
  }

  ngOnDestroy(): void {
    this._gsapService.killAnimations();
    console.log(ScrollTrigger.getAll())
  }

 

Thank you for any help you can give me

 

 

Link to comment
Share on other sites

That almost surely means that you created your ScrollTriggers BEFORE Angular was done shifting around the layout. I'm not an Angular guy at all, but maybe use ngAfterViewInit() instead? You just need to make sure that you either create your ScrollTriggers after the page is fully laid out -or- you could call ScrollTrigger.refresh() after it's done (that'll force ScrollTrigger to re-calculate all the start/end values). 

  • Like 1
Link to comment
Share on other sites

Hello thank you for the answers, this somehow worked :D, (it needs the (true) in the refresh())

 

  ngAfterViewInit(): void {
    this.anim0();
    this.anim1();    
    this.anim2();
  }
  
  ngOnInit(): void {
    ScrollTrigger.refresh(true)
  }

  ngOnDestroy(): void {
    this._gsapService.killBIll();
    console.log(ScrollTrigger.getAll())
  }

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...