Search the Community

Hi everyone, I’m encountering the following error when deploying my project on Netlify: Invalid property scrollTrigger set to {trigger: section#vertical, start: 'top top', end: 'bottom center', scrub: true}. This works perfectly fine in my local environment, but the error appears on Netlify. Here is what I’ve tried so far: I made sure to register the plugin using gsap.registerPlugin(ScrollTrigger), but the issue persists. I double-checked that all the DOM elements (#vertical and .col_left) exist before initializing ScrollTrigger. I tested the values passed to scrollTrigger using console.log, and they seem correct. Here’s a simplified example of my code: import React, { useEffect } from "react"; import "../styles/SecondScreen1.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import orange from "../assets/images/Orange.webp"; import mapnazava from "../assets/images/Mpanazava.webp"; import gate from "../assets/images/Gate.webp"; import Lenis from "@studio-freight/lenis"; gsap.registerPlugin(ScrollTrigger); const SecondScreen1 = () => { useEffect(() => { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), }); function raf(time) { lenis.raf(time); ScrollTrigger.update(); requestAnimationFrame(raf); } requestAnimationFrame(raf); const section1 = document.getElementById("vertical"); const colLeft = document.querySelector(".col_left"); // Gestion responsive avec matchMedia const mm = gsap.matchMedia(); mm.add("(max-width: 449px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "90vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); mm.add("(min-width: 450px) and (max-width: 950px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "115vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); mm.add("(min-width: 951px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "32vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); mm.revert(); // Supprimer les animations lors du démontage }; }, []); return ( <div className="secondscreen1"> <section id="vertical"> <div className="container"> <div className="vertical__content"> <div className="col col_left"> <h2 className="vertical__heading custom-h2"> <span>Experience</span> <span>That you</span> <span>Can Trust</span> </h2> <h4 className="custom-h4"> MY PROFESSIONAL PATH </h4> <p className="custom-p"> Over my career, I've had the opportunity to consolidate my skills while working with outstanding organizations across various industries. Here are some of the projects and companies I’ve had the pleasure of contributing to. </p> </div> <div className="col col_right"> <div className="vertical__item"> <div className="header-container"> <img src={orange} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Orange Digital Center</h3> <h3 className="custom-h3">Développeur Mobile et Web</h3> <h3 className="custom-h3 tech"> Flutter - React Js - Node Js </h3> </div> </div> <p> July 2024 - October 2024 ( 4-month internship ) <br /> As part of the Orange Summer Challenge, I created the Mobile application of the SPARE project with Flutter and the website with React Js. </p> </div> <div className="vertical__item"> <div className="header-container"> <img src={mapnazava} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Mpanazava eto Madagascar</h3> <h3 className="custom-h3"> Développeur d’application Mobile </h3> <h3 className="custom-h3 tech">Flutter- Node Js</h3> </div> </div> <p> February 2024 - June 2024 <br /> Development of a mobile payment application payment form mobile application with Flutter and Node Js with transaction tracking. </p> </div> <div className="vertical__item"> <div className="header-container"> <img src={gate} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Gate Company Group</h3> <h3 className="custom-h3">Développeur Mobile et Web</h3> <h3 className="custom-h3 tech"> React Native - React Js - Node Js </h3> </div> </div> <p> November 2023 - January 2024 ( 3-months internship ) <br /> Development of GateAfri, GateNews and AfriMuz with React Native. Optimization of the graphical (UI) and technical aspects of the GateAfri and GateNews websites with React Js. </p> </div> </div> </div> </div> </section> </div> ); }; export default SecondScreen1;