Share Posted May 22, 2022 Hi! I've just started learning GSAP but I haven't been able to get anything to move/animate. I'm using NextJS with Typescript and here's an example of something I've done. Nothing is moving at all, and I've also tried using TweenMax. Any help would be much appreciated. import type { NextPage } from 'next' import Head from 'next/head' import { useRef, useEffect } from 'react'; import { gsap, Power3 } from 'gsap'; const Home: NextPage = () => { let el = useRef<HTMLDivElement>(null); useEffect(() => { gsap.from(el, {duration: 0.7, opacity: 0, x: 40, ease:Power3.easeOut}) }, []) return ( <div > <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <main > <div ref={el} style={{width:"75px", height: "75px", backgroundColor: "white"}}/> </main> </div> ) } export default Home Link to comment Share on other sites More sharing options...
Solution Solution Share Posted May 22, 2022 Hey there! Welcome to the forums. Maybe this template will help?https://codesandbox.io/s/gsap-next-js-starter-jekrn Link to comment Share on other sites More sharing options...
Author Share Posted May 22, 2022 Thank you, the issue was not using .current 1 Link to comment Share on other sites More sharing options...
Share Posted May 23, 2022 Excellent. Glad you got it sorted. ☺️ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now