Jump to content
Search Community

TypeScript 'GSAPTimeline' is not defined

Koyash test
Moderator Tag

Go to solution Solved by Koyash,

Recommended Posts

I'm currently converting my Vue 2 projects into Vue 3 + TypeScript and I'm running into an issue with TypeScript types for GSAP. I'm quite new to TypeScript but after some research I think this should be the correct way of using a GSAP Timeline with TypeScript? But this gives me the following,  'GSAPTimeline' is not defined  no-undef.

 

<script setup lang="ts">
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

let gsapTimeline: GSAPTimeline;

const someFunc = (): void => {
    gsapTimeline = gsap.timeline({
      scrollTrigger: {
        trigger: "#some-container",
        pin: ".pin",
        start: "top top",
        endTrigger: ".end-trigger",
        end: "top bottom",
        // markers: true,
        scrub: 1,
        invalidateOnRefresh: true,
        anticipatePin: 1,
      },
    });
  };

someFunc();
</script>

 

What am I missing?
GSAP version 3.10.4

 

Link to comment
Share on other sites

Hi @Koyash. That's definitely a TypeScript question, not a GSAP one. Sorry, I'm not much of a TypeScript guy. You may need to ask in a more TypeScript-focused community; we really try to keep these forums focused on GSAP-specific questions. We'd love to hear back from you if you find a solution, though.

 

My guess is that it's some kind of configuration issue on your end where you need to point your compiler/linter to the GSAP TypeScript definitions which are in the "types" directory from the NPM/github repository (and the gsap-bonus.tgz file of your bonus zip).

  • Like 1
Link to comment
Share on other sites

  • Solution
11 hours ago, GreenSock said:

Hi @Koyash. That's definitely a TypeScript question, not a GSAP one. Sorry, I'm not much of a TypeScript guy. You may need to ask in a more TypeScript-focused community; we really try to keep these forums focused on GSAP-specific questions. We'd love to hear back from you if you find a solution, though.

 

My guess is that it's some kind of configuration issue on your end where you need to point your compiler/linter to the GSAP TypeScript definitions which are in the "types" directory from the NPM/github repository (and the gsap-bonus.tgz file of your bonus zip).

 

Yep, complete oversight on my end my apologies. But you definitely pointed me in the right direction.

For anyone in the future struggling with this issue, if this doesn't fix the issue inside your tsconfig.json:

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}


Try adding this to your tsconfig.json.

{
  "compilerOptions": {
    "declaration": true
  }
}

 

If that doesn't resolve it you may be getting eslint errors and not actually TypeScript errors. To resolve undef errors from eslint add this to your .eslintrc.js file. This won't have a negative impact as TS checks for this already. official explanation

overrides: [
    {
      files: [
        "*.ts",
        "*.vue", //or your relevant framework file extensions
      ],
      rules: {
        "no-undef": "off",
      },
    },
  ],

 

  • Like 3
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.
×
×
  • Create New...