Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GoodMorning

GSAP not working locally Typescript + NextJS

Go to solution Solved by Cassie,

Recommended Posts

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

Thank you, the issue was not using .current

  • Like 1
Link to comment
Share on other sites

Excellent. Glad you got it sorted. ☺️

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.
×