Invalid property scrollTrigger set to

January 18

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 (

<span>Experience</span>

<span>Can Trust</span>

</h2>

<h4 className="custom-h4"> MY PROFESSIONAL PATH </h4>

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>

<h3 className="custom-h3">Orange Digital Center</h3>

<h3 className="custom-h3">Développeur Mobile et Web</h3>

Flutter - React Js - Node Js

</h3>

</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>

<h3 className="custom-h3">Mpanazava eto Madagascar</h3>

Développeur d’application Mobile

</h3>

<h3 className="custom-h3 tech">Flutter- Node Js</h3>

</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>

<h3 className="custom-h3">Gate Company Group</h3>

<h3 className="custom-h3">Développeur Mobile et Web</h3>

React Native - React Js - Node Js

</h3>

</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>

</section>

</div>

);

};

export default SecondScreen1;

January 18

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue?

Here are some React starters you can fork: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

I wonder why you're using useEffect() instead of useGSAP(). I'd strongly recommend swapping out any useEffect() with useGSAP(). See https://gsap.com/react for details.

That error definitely indicates that ScrollTrigger has NOT been registered before you created those animations.

January 18

By the way, I noticed you're adding 3 different matchMedia() calls that have the same code except for the "y" value - you could simplify that quite a bit using the conditions syntax:

mm.add({
    isDesktop: "(min-width: 951px)",
    isTablet: "(min-width: 450px) and (max-width: 950px)",
    isMobile: "(max-width: 449px)"
  }, (context) => {
    // context.conditions has a boolean property for each condition defined above indicating if it's matched or not.
    let { isDesktop, isTablet, isMobile } = context.conditions;

    gsap.fromTo(colLeft, { 
      y: 0 
    }, {
      y: isDesktop ? "32vh" : isTablet ? "115vh" : "90vh",
      duration: 1,
      ease: "tick",
      scrollTrigger: {
        trigger: section1,
        start: "top top",
        end: "bottom center",
        scrub: true
      },
    });
});

January 19

Thank you for your response!

I’ve already tried using useGsap as suggested, but the issue persists. Everything works perfectly in my local environment, but when deployed on Netlify, I encounter this error:

experience.js:51 Invalid property scrollTrigger set to

I understand the importance of providing a minimal demo. I’ll create a simplified example on Stackblitz or CodePen to illustrate the issue more clearly.

Regarding your note about registering ScrollTrigger, I’ll double-check to ensure it’s properly registered before creating any animations. Thank you for the advice and the React starters link; I’ll review them as well.

import React 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";

import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP, ScrollTrigger);

const SecondScreen1 = () => {

useGSAP(() => {

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");

const mm = gsap.matchMedia();

mm.add(

{

isDesktop: "(min-width: 951px)",

isTablet: "(min-width: 450px) and (max-width: 950px)",

isMobile: "(max-width: 449px)",

},

(context) => {

const { isDesktop, isTablet, isMobile } = context.conditions;

const yValue = isDesktop

? "32vh"

: isTablet

? "115vh"

: isMobile

? "90vh"

: 0;

gsap.fromTo(

colLeft,

{ y: 0 },

{

y: yValue,

duration: 1,

ease: "tick",

scrollTrigger: {

trigger: section1,

start: "top top",

end: "bottom center",

scrub: true,

},

}

);

}

);

return () => {

ScrollTrigger.getAll().forEach((trigger) => trigger.kill());

mm.revert();

};

}, []);

return (

<span>Experience</span>

<span>Can Trust</span>

</h2>

<h4 className="custom-h4"> MY PROFESSIONAL PATH </h4>

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>

<h3 className="custom-h3">Orange Digital Center</h3>

<h3 className="custom-h3">Développeur Mobile et Web</h3>

Flutter - React Js - Node Js

</h3>

</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>

<h3 className="custom-h3">Mpanazava eto Madagascar</h3>

Développeur d’application Mobile

</h3>

<h3 className="custom-h3 tech">Flutter- Node Js</h3>

</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>

<h3 className="custom-h3">Gate Company Group</h3>

<h3 className="custom-h3">Développeur Mobile et Web</h3>

React Native - React Js - Node Js

</h3>

</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>

</section>

</div>

);

};

export default SecondScreen1;

January 20

Hi,

Indeed without a minimal demo there is not much we can do here. The only advice I can offer is that you don't need to revert your GSAP MatchMedia instance inside the useGSAP hook or kill GSAP instances in the return function, our useGSAP hook takes care of all that under the hood for you:

https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx

Hopefully this helps

Happy Tweening!

Notifications

Messages

Invalid property scrollTrigger set to

Recommended Posts

rantsa jonathan

GSAP Helper

GSAP Helper

rantsa jonathan

Rodrigo

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members