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!

Yes, the SSR is activated, is that incompatible?

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().