Shanemur
Shanemur's Achievements
-
-
-
-
Rare
-
Rare
Recent Badges
0
Reputation
-
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> ); }
-
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
