Jump to content
GreenSock

yousoumar

ScrollTrigger not functioning with Next

Go to solution Solved by OSUblake,

Recommended Posts

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

 

Link to comment
Share on other sites

  • Solution

Welcome to the forums @yousoumar

 

It should be scrollTrigger instead of ScrollTrigger.  

 

 

 

 

  • Like 4
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×