NO Documentation for React or Next js

Shanemur · January 10, 2023

Why don't you create Documentation for using GSAP with Next JS

Sick of having to read through other peoples issues to hope in finding a solution!

Anyone answer this issue with timeline in next js

let tl = timeline();

Getting this error in browser

GreenSock · January 10, 2023

Welcome to the forums, @Shanemur. Very sorry to hear about your frustration. Have you seen this page in the docs?:

https://greensock.com/docs/v3/UsingGSAPwith

It's tough to troubleshoot just by the screenshots you provided (a minimal demo, like in Stackblitz or CodeSandbox is best), but I'll offer some ideas:

What does "timeline" refer to in your code? Are you importing that from somewhere? It looks very odd to me - did you mean to do tl = gsap.timeline()? That's how it's typically done.
I noticed you're trying to use CSSRulePlugin which is totally fine, but now that CSS variables are supported in all major browsers, that's almost always a better way to do things. There's a note in the docs.
I'd strongly recommend reading this article because Next is built on React:

If you're still struggling, just fork this demo and recreate the issue so we can see what's going on: https://stackblitz.com/edit/nextjs-bzndnh?file=pages%2Findex.js

Don't worry - we've got your back when it comes to any GSAP-related questions. 👍

Shanemur · January 10, 2023

Yes I saw that page "Getting Started with GSAP + React which doesn't provide a solution to my issue.

Don't have a Codesandbox with my code

Code is as follows:

import Head from "next/head";
import { useRef, useEffect } from "react";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import { gsap, timeline, Power2 } from "gsap";

export default function Home() {
  let container = useRef(null);
  let image = useRef(null);
  let tl = timeline();
  // let imageReveal = CSSRulePlugin.getRule(".img_container:after");
  useEffect(() => {
    const GSAP = require("gsap/CSSRulePlugin");
    const { CSSRulePlugin } = GSAP;
    gsap.registerPlugin(CSSRulePlugin);
    let imageReveal = CSSRulePlugin.getRule(".img_container:after");
    tl.to(container, 1, { css: { visibility: "visible" } });
  });
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <div ref={(el) => (container = el)} className={styles.container}>
          <>
            <div className={styles.img_container}>
              <img ref={(el) => (image = el)} src="/img_reveal.jpg" />
            </div>
          </>
        </div>
      </div>
    </div>
  );
}

GreenSock · January 10, 2023

I notice quite a few problems:

Like I said, you're referencing timeline incorrectly. It should be gsap.timeline(). I'm surprised you're not getting an error in your coding environment saying that "timeline" is not exported from the gsap package.
Your useEffect() doesn't have an empty dependency Array, so it'll get called on every render. (covered in the article I linked to)
You're not doing proper cleanup. I highly recommend using gsap.context() to make it super easy. (covered in the article I linked to). Beware that React 18 started double-invoking useEffect(), so you might inadvertently be creating multiple animations. This is why cleanup is important. gsap.context() solves all that.
You're importing Power2 but never using it, and that's the very old syntax anyway. You should use string-based eases like ease: "power2.out" instead of ease: Power2.easeOut. None of your code even uses an ease, so there's no need to import that.
You're loading/registering CSSRulePlugin...but then never using it.
You don't need the css:{} wrapper. Haven't needed that since around 2013 I believe. Your syntax all looks like it's quite outdated - I think you'll dig the modern syntax.
Are you just using GSAP to set the container's visibility to "visible" after 1 second? That's not an animatable property of course, so it'll just toggle it at the end of the "tween". You could just use a gsap.set() with a 1 second delay. It's fine to use a tween if you prefer - I'm just pointing out that it might be more intuitive.

So your code could probably look like this:

import Head from "next/head";
import { useRef, useEffect } from "react";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import gsap from "gsap";

export default function Home() {
	let container = useRef(null);
	let image = useRef(null);
	useEffect(() => {
		let ctx = gsap.context(() => {
			// all your GSAP code can go inside this context for easy cleanup
			gsap.set(container, { visibility: "visible", delay: 1 });
		});
		return () => ctx.revert(); // <!-- CLEANUP!
	}, []);
	return (
		<div>
			<Head>
				<title>Create Next App</title>
				<meta name="description" content="Generated by create next app" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<div>
				<div ref={(el) => (container = el)} className={styles.container}>
					<>
						<div className={styles.img_container}>
							<img ref={(el) => (image = el)} src="/img_reveal.jpg" />
						</div>
					</>
				</div>
			</div>
		</div>
	);
}

I hope that helps. And again, I think you'd benefit greatly from reading that React article.

Happy tweening!

Notifications

Messages

NO Documentation for React or Next js

Recommended Posts

Shanemur

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Shanemur

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members