GSAP Angular problems : properties of undefined

[Zaelos]

Hello, I'm having an issue with GSAP. First and foremost, I'm using Angular for my project. In my project, I have a router, meaning that my page calls other pages dynamically like this:

 

<app-nav-bar></app-nav-bar>

<div class="router-outlet" [@activation]="burgerMenuIsOpen">
    <router-outlet></router-outlet>
</div>

<app-footer></app-footer>

Once this is done within <router-outlet></router-outlet>, there is my 'home-page' which looks like this:

 

<section>
    <div class="magicText">
        @for( spanText of textSplit; track spanText ){
                <span>{{spanText}}</span>
            }
            
    </div>
</section>

In my TypeScript component hosting my code, it is like this:

 

import { Component, AfterViewInit} from '@angular/core';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);



@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements AfterViewInit {

text: string = 'Json Server' 
textSplit: string[] = this.text.split('').map(
    valeur => valeur === ' ' ? '\u00A0' : valeur // espace ? oui alors \u00A0 sinon garde t'as valeur
  );
  timeline = gsap.timeline();// on initialise GASP
  constructor() { }
ngAfterViewInit() {
    this.timeline.from("span", { // on va cherche les span
      y: -500, //on set les paramètres de GASP ici on déplace en dehors de la vue
      opacity: 0, // ici on les rends transparent
      scrollTrigger : {
        trigger: "section",
        pin: true,
        scrub:1,
      },
      stagger: {
        amount: 1
      }
    })
  }
}

So this creates a <span>$aLetter</span> for the inserted word, then we apply a GSAP animation on it, but I get this error: twice.

 

ERROR TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
    at toArray (g:/www/ProjetPortfolio/PortFolioFront/node_modules/gsap/gsap-core.js:667:173)
    at Tween2 (g:/www/ProjetPortfolio/PortFolioFront/node_modules/gsap/gsap-core.js:3195:128)
    at _createTweenType2 (g:/www/ProjetPortfolio/PortFolioFront/node_modules/gsap/gsap-core.js:633:10)
    at Timeline2.from2 (g:/www/ProjetPortfolio/PortFolioFront/node_modules/gsap/gsap-core.js:2048:5)
    at _HomePageComponent.magicianisation (g:/www/ProjetPortfolio/PortFolioFront/src/app/pages/home-page/home-page.component.ts:30:17)
    at _HomePageComponent.ngAfterViewInit (g:/www/ProjetPortfolio/PortFolioFront/src/app/pages/home-page/home-page.component.ts:50:8)
    at callHookInternal (g:/www/ProjetPortfolio/PortFolioFront/node_modules/@angular/core/fesm2022/core.mjs:6117:14)
    at callHook (g:/www/ProjetPortfolio/PortFolioFront/node_modules/@angular/core/fesm2022/core.mjs:6144:13)
    at callHooks (g:/www/ProjetPortfolio/PortFolioFront/node_modules/@angular/core/fesm2022/core.mjs:6099:17)
    at executeInitAndCheckHooks (g:/www/ProjetPortfolio/PortFolioFront/node_modules/@angular/core/fesm2022/core.mjs:6049:9)

 

I've been working on this for 2 days, and it's becoming quite challenging. ^^ Thanks again for your help.

 

Tested solutions:

• Used a counter in the for loop to control the loop's end, then used a function for my GSAP (same infinite error repeating).
• Placed my GSAP function at the end of my HTML code (same infinite error).
• Tried using ["span", undefined].filter(function(el) { return el!=null}) instead of just "span" in my GSAP.
• Put it inside an ngOnInit().

 

[GreenSock]

That error indicates that when you're trying to animate something and using selector text for the target, the "document" is not even defined. Are you using server-side rendering or something like that? If this is running only inside a browser, it's difficult for me to understand how it could throw that error. If you'd like more help, please provide a minimal demo in Stackblitz or CodeSandbox or CodePen and we'd be happy to take a look. No need to include your whole project - just the simplest possible way to reproduce that error is best (use some colored <div> elements or something). 

[Zaelos]

Yes, the SSR is activated, is that incompatible?

[GreenSock]

It's not that it's incompatible - you should probably just run the animation code on the client side, that's all. In other words, it's a total waste to try to animate things that don't exist in the DOM (yet). Wait until the document is defined, then animate things. 

[Zaelos]

So, I've solved the problem:
the SSR was indeed the issue, so I created a service:
platform.service
to call it whenever I need it:
 

constructor(
  @Inject(PLATFORM_ID)
  private platformId: Object
) { }

isOnVue(): boolean {
  return isPlatformBrowser(this.platformId);
}

isOnServ(): boolean {
  return isPlatformServer(this.platformId);
}

And I simply put my GSAP inside an

 

if (this.platform.isOnVue()) {
  // GSAP code here
}

Problem solved! 😄 Thank you very much!