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

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%', }, }, ); }); }