Jump to content
Search Community

Next.js with Scroll Trigger

WearyTraveler test

By WearyTraveler
in GSAP

Moderator Tag
 Share

Recommended Posts

WearyTraveler test

WearyTraveler

Posted
Posted

I am trying to get a scroll trigger background animation to work on Next.js, like the air pods example many have posted. I am having a lot of trouble, and there is no great documentation for next.js specifically. I understand from reading many forum posts the gsap logic should be inside useEffect(). 

I am runnning into a few errors with this not rendering at all or trigger.revert is not function errors and etc. I appreciate any help. Thank you for your time.  


Here is a simplified version on my code:

 

// Landing Page
import Head from "next/head";
import LightExplosion from "../public/gif/LightExplosion.webp";
import Image from "next/image";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { useRef, useEffect } from "react";
 
 function Landing() {
   const boxRef = useRef(null);
 
 if (typeof window !== "undefined") {
   gsap.registerPlugin(ScrollTrigger);
 }
 
 useEffect(() => {
  let frame_count = 9;
  let offset_value = 100;
 
  const t = gsap.to(boxRef, {
    scrollTrigger: {
    trigger: boxRef,
    start: "top top",
    end: "+=" + frame_count * offset_value,
    pin: true,
    scrub: true,
    },
  });
  // Clean up before unmounting the component/page
  return () => {
    t.kill();
    ScrollTrigger.getAll().forEach((e) => e.kill());
  };
  }, []);
 
 return (
 <html>
  <div>
   <Head>
   <title>Home</title>
   <meta
   name="viewport"
   content="width=device-width, initial-scale=1.0, viewport-fit=cover"
   ></meta>
   <meta name="description" content="Description Here."></meta>
   </Head>
  <div>
  <div className="-z-30 absolute top-0 right-0 bottom-0 left-0">
   <Image
     src={LightExplosion}
     ref={boxRef}
     layout="fill"
     objectFit="cover"
   />
  </div>
  <component_here />
  <component_here_two />
 </div>
</div>
</html>
);
}
 
export default Landing;

 

 

 

 
Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi @WearyTraveler and welcome to the GreenSock forums!

 

There are a few things with your setup. You are using boxRef as the GSAP target, but you should use boxRef.current, that's the actual DOM node GSAP can use, a ref is an object (something GSAP has no issue with) managed internally by React.

 

The reason for not having a lot of documentation for Next is because is simply React. We do have a couple of articles for React that should prove valuable:

Also is recommended to use GSAP Context when working with React/Next/Gatsby, as it will simplify the whole cleanup part of your code quite a bit:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally, is really hard for us to debug or find/solve issues without a live minimal demo that we can edit, so we have these starter templates for NextJS and ScrollTrigger.

 

Single Page ScrollTrigger:

https://codesandbox.io/s/gsap-scrolltrigger-nextjs-starter-rt0keu

 

Multi Page ScrollTrigger:

https://codesandbox.io/s/gsap-nextjs-multi-pages-starter-44vcgw

 

Feel free to fork them and play with them in order to get started or to clearly show the issue you are having. Let us know if you have more questions.

 

Happy Tweening!

Link to comment
Share on other sites
GreenSock test

GreenSock

Posted
Posted

Yep, I'd echo everything Rodrigo said. Also, that .revert() error makes it sound like you've got mis-matched versions of GSAP & ScrollTrigger. Or maybe you're loading a component that was compiled with a much older version of GSAP? I'd strongly recommend making sure you're using the latest version of everything and that if you're subloading compiled content, that it also is using the latest version. 

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...