Issue when scrolling through page as it loads

[Liam090]

Hey hopefully someone may be able to assist in this issue.

 

I am working in Angular 13 and I have an initial animation which launches when the page loads. And then I initialise my scroll triggers when the page loads which work perfectly the second time the page loads or if the users waits before scrolling down the page.

 

However if the user scrolls down the page before the first scroll trigger is hit then the scroll triggers further down the page do not work and therefore I have no text displayed. Any advice of this issue would be greatly appreciated, these are both being called inside an ngAfterViewInit and are viewchildren set in the HTML

 

 

 

  @ViewChildren('titleDiscover') titleDiscover!: QueryList<ElementRef>;

 

  @ViewChildren('scrollTrigger') scrollTriggers!: QueryList<ElementRef>;

 

  constructor(private pageDataService: PageDataService, private router: Router) {}

 

  ngOnInit(): void {

    gsap.registerPlugin(ScrollTrigger, Draggable);

    this.setTabPort();

    this.pageDataService.getHomePageData().subscribe((result) => {

      this.homePageData = result;

      if (!this.homePageData) {

        this.router.navigate(['**']);

      }

    });

  }

 

  ngAfterViewInit(): void {

    this.initialiseTitleFades();

    this.initialiseScrollTriggers();

  }

 

 

initialiseTitleFades(): void {

    this.titleDiscover.forEach((element, index) => {

      gsap.from(element.nativeElement, { y: -50, opacity: 0 }).delay(0.4 * (index + 1.5));

    });

  }

 

  initialiseScrollTriggers(): void {

    this.scrollTriggers.forEach((element) => {

      gsap.fromTo(

        element.nativeElement,

        {

          y: -20,

          opacity: 0,

        },

        {

          y: 0,

          opacity: 1,

          scrollTrigger: {

            trigger: element.nativeElement,

            start: 'bottom 100%',

          },

        },

      );

    });

  }

[OSUblake]

Welcome the forums @Liam090

 

I'm wondering if you are you running in the same issue as this person.

 

 

If not, please provide a minimal showing the issue. There is no need to include Angular as it's not relevant to the issue, just a simple demo. Thanks!

 

 

[Liam090]

Thank you for the reply, it only seems to appear when i go to my home page from a login component, when i take the login component out and go straight to home it works perfectly. And the login page wont be there when I launch so for now im not too concerned after a bit more digging. 

 

Thanks

[OSUblake]

Also make sure to kill your ScrollTriggers when leaving a page. I'm not sure where to do that in Angular, but this will kill them all.

 

ScrollTrigger.getAll().forEach(t => t.kill())