AnnaDVD

Hello!. Please help me to understand what I am doing wrong. The code works in the demo in codepen, but when I inject it into my angular project it doesn't work in FireFox: ts: import { Component, OnInit } from '@angular/core'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; @Component({ selector: 'app-home2', templateUrl: './home2.component.html', styleUrls: ['./home2.component.scss'] }) export class Home2Component implements OnInit { constructor() { } ngOnInit(): void { // Register ScrollTrigger plugin gsap.registerPlugin(ScrollTrigger); // Define your GSAP animation timeline const tl = gsap.timeline(); // Use ScrollTrigger with GSAP animations tl.from(".line span, .line p", { duration: 1.8, y: 100, ease: "power4.out", delay: 1, skewY: 7, stagger: { amount: 0.3 }, scrollTrigger: { trigger: ".line", // Adjusted trigger element to include both span and p start: "top 80%", // Adjust as needed end: "bottom 20%", // Adjust as needed toggleActions: "play none none reverse", markers: true // Set to true for debug markers } }); } } scss: @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); *{ padding: 0; margin: 0; box-sizing: border-box; } html, body{ background-color: black; color: white; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .container{ width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; .line{ width: 70%; height: 70px; position: relative; overflow: hidden; span{ position: absolute; font-size: 3rem; line-height: 4.2rem; } } } HTML: <div class="container"> <div class="line"> <span>Hello!</span> </div> <div class="line"> <span>This is a</span> </div> <div class="line"> <span>text reveal animation.</span> </div> </div>