ScrollTrigger + angular + lenis(?) + resize issues

[Butter Dude]

Hi Forum, i'm having troubles refreshing the scrolltriggers in my angular project. So when the site is loaded, everything works fine, but when i resize the video in the container i not perfectly aligned anymore.

 

I've set up a minimal demo on stackblitz: Stackblitz Demo

EDITNOTE: changed from codesandbox to stackblitz due to sharing issues

 

see: 

app/src/pages/home/home.component.ts

 

as you can see, i tried some solutions I found on here the forums like invalidateOnRefresh and ScrollTrigger.refresh(true), but none of these work.

 

Desired behaviour after resize:

Actual behaviour after resize:

 

I appreciate any help/hint/idea

Thank you!

[Rodrigo]

Hi @Future Forms and welcome to the GSAP Forums!

 

Unfortunately I'm unable to save/fork any changes made to your demo since it seems I need to install something that is not working here locally and I really don't know what exactly. Any chance you can create a Stackblitz demo from scratch and not from an existing repo? We understand that deploying from a repo makes things far easier on your end but is definitely not helping on ours.

 

Also have you tried this without Lenis? Do the GSAP animations and ScrollTrigger instances work as expected?

 

Another thing that caught my attention is this:

onResize() {
  console.log(this.animations[0]);
  ScrollTrigger.refresh(true);
  console.log('progress: ', this.animations[0].scrollTrigger?.progress);
  this.animations[0].scrollTrigger?.refresh();
}

Any particular reason for this? ScrollTrigger has it's own refresh cycle/pipe (for naming it someway) that is debounced for better performance that is triggered on each resize event, so there is no need for all this.

 

Finally you can use GSAP Context in order to group all your GSAP animations and ScrollTrigger instances under that particular scope and revert them a single method, so there is no really need for this as well:

public ngOnDestroy(): void {
  this.lenis.destroy();
  this.animations.forEach(a => a.scrollTrigger?.kill());
  ScrollTrigger.getAll().forEach(t => t.kill());
}

https://gsap.com/docs/v3/GSAP/gsap.context()

 

You can create a GSAP Context instance earlier in your component (like on the class constructor or in the view init method) and then just revert it:

export class HomeComponent implements AfterViewInit, OnDestroy {
  @ViewChild('showreel') showreel?: ElementRef<HTMLVideoElement>;

  @HostListener('window:resize', ['$event'])

  constructor(
    private readonly destroy$: DestroyService,
    private readonly changeDetector: ChangeDetectorRef,
  ) {}

  ngAfterViewInit(): void {
    this.ctx = gsap.context();
  }

  public ngOnDestroy(): void {
    this.ctx?.revert();
  }
}

Hopefully this helps in someway.

Happy Tweening!