Zaelos
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Zaelos
-
-
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().
GSAP Angular problems : properties of undefined
in GSAP
Posted
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:
And I simply put my GSAP inside an
Problem solved! 😄 Thank you very much!