Zaelos Posted March 3 Share Posted March 3 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(). Link to comment Share on other sites More sharing options...
GreenSock Posted March 4 Share Posted March 4 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). Link to comment Share on other sites More sharing options...
Zaelos Posted March 4 Author Share Posted March 4 Yes, the SSR is activated, is that incompatible? Link to comment Share on other sites More sharing options...
GreenSock Posted March 4 Share Posted March 4 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. Link to comment Share on other sites More sharing options...
Zaelos Posted March 4 Author Share Posted March 4 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! 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now