ScrollTrigger not functioning with Next

[yousoumar]

I am having a hard time with ScrollTrigger in my Next app. Here is my code below. I am expecting markers and my animation to fire on scroll, but I get my animation on load and not my markers.

 

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

import { useEffect, useRef } from "react";
export default function Services() {
  const servicesRef = useRef();
  useEffect(() => {
    let tl = gsap.timeline({
      ScrollTrigger: {
        trigger: servicesRef.current,
        markers: true,
      },
    });

    tl.to(servicesRef.current.querySelector("h1"), {
      color: "white",
    });
  }, []);
  return (
    <section className="services" ref={servicesRef}>
      <h1>Nos services</h1>
    </section>
  );
}

 

[OSUblake]

Welcome to the forums @yousoumar

 

It should be scrollTrigger instead of ScrollTrigger.  

 

 

 

 

[yousoumar]

Thank you so much @OSUblake, your responses in the forum helped me many times and today with this one. Since it is my first time using ScrollTrigger with Next, I  was not thinking of a possible syntax error at all.  And thank you guys for this wonderful GreenSock.