Jump to content
Search Community

Usage with typescript

Matheus Verissimo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, React yes, but React with typescript is out of my range, since I don't use typescript.

 

I made this sample and it seems to work, at least on stackblitz:

 

https://stackblitz.com/edit/gsap-react-typescript

 

But I see some errors being displayed there, probably because of something I'm not doing correctly typescript-wise.

 

I'll summon @OSUblake, our resident typescript wizard and see if we can get an explanation and a cool, mind-blowing/jaw-dropping example ;) 

 

Happy Tweening!!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Ok, so I did some research on the subject and this whole typescript is quite beyond my area of knowledge. Lucky for me I got in touch with this awesome guy in Reactiflux discord app: Damien Erambert (Twitter - GitHub) and He pointed me in the right direction.

 

Turns out that first of all you need to import the type definitions for gsap from this package:

 

https://www.npmjs.com/package/@types/gsap

 

And then define both the GSAP instance and the DOM ref as the return values of the GSAP instance and the ref.

 

I've updated the stackblitz sample so you can check it.

 

Happy Tweening!!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

  • 9 months later...

Make sure for v3 that you DO NOT install @types. That will cause conflicts as the types are already included in the package.

 

On 2/19/2019 at 8:17 AM, Matheus Verissimo said:

 


t: ReturnType<typeof TweenLite.to> | null;

 

 

For v3, you don't need use typeof like that. We will need to document how users can use some of the global types like this.

 

let tl: GSAPTimeline; // also compatible with TimelineLite/TimelineMax
let tween: GSAPTween; // also compatible with TweenLite/TweenMax

let tweenConfig: GSAPTweenVars = {
  x: (index: number) => index * 0.5
};

let tlConfig: GSAPTimelineVars = {
  paused: true
};

tl = gsap.timeline(tlConfig);
tween = gsap.to(".foo", tweenConfig);

 

  • Like 3
Link to comment
Share on other sites

3 hours ago, Btween said:

Is there a tutorial somewhere that describes how to get code hinting for GSAP 3 in VS Code? It would be very useful.

 

You need to install gsap, like with npm. Once you've done that, code hinting should be available for both TypeScript and JavaScript files.

 

Is this not happening?

  • Like 2
Link to comment
Share on other sites

  • 3 years later...
On 12/7/2019 at 3:20 PM, OSUblake said:

Make sure for v3 that you DO NOT install @types. That will cause conflicts as the types are already included in the package.

 

 

For v3, you don't need use typeof like that. We will need to document how users can use some of the global types like this.

 

let tl: GSAPTimeline; // also compatible with TimelineLite/TimelineMax
let tween: GSAPTween; // also compatible with TweenLite/TweenMax

let tweenConfig: GSAPTweenVars = {
  x: (index: number) => index * 0.5
};

let tlConfig: GSAPTimelineVars = {
  paused: true
};

tl = gsap.timeline(tlConfig);
tween = gsap.to(".foo", tweenConfig);

 

Thanks!

What would the import paths be though for GSAPTimeline? 
I couldn't find any so I did the following in a SvelteKit typescript project, GSAP 3.12.2
 

let tl:gsap.core.Timeline 


 

Link to comment
Share on other sites

Hi @InsenseVN and welcome to the GreenSock forums!

 

I'm not in front of my computer now but from this

https://github.com/greensock/GSAP/blob/master/types/index.d.ts

 

I believe the import should be directly from gsap

import { GSAPTimeline } from "gsap";

Typescript is not something I use on a regular basis.

 

Give that a try and let us know how it works.

 

Happy Tweening!

 

Link to comment
Share on other sites

46 minutes ago, Rodrigo said:

Hi @InsenseVN and welcome to the GreenSock forums!

 

I'm not in front of my computer now but from this

https://github.com/greensock/GSAP/blob/master/types/index.d.ts

 

I believe the import should be directly from gsap

import { GSAPTimeline } from "gsap";

Typescript is not something I use on a regular basis.

 

Give that a try and let us know how it works.

 

Happy Tweening!

 

Hi Rodrigo

Thanks for the welcome!
That was the first thing I tried actually & when it didn't work, I tried other solutions but after reading your reply, here's what worked for me in SvelteKit

 

import type GSAPTimeline  from 'gsap';

//Alternatively, depending...
import GSAPTimeline  from 'gsap';

 

  • Thanks 1
Link to comment
Share on other sites

Hi,

 

Just out of curiosity I created a SvelteKit project with TS using this with the TS setup:

npm create svelte@latest my-app

And this:

<script lang="ts">
  import Counter from './Counter.svelte';
  import welcome from '$lib/images/svelte-welcome.webp';
  import welcome_fallback from '$lib/images/svelte-welcome.png';
  import gsap from 'gsap';

  let tl: GSAPTimeline = gsap.timeline();
  tl.to({}, {});
</script>

Throws an unexpected token error on line 7 that is the colon after tl. Is this the recommended setup for SvelteKit with TS.

let tl: GSAPTimeline = gsap.timeline();
      ^

IDK if the setup is correct or not. I'd appreciate any input you can give us.

 

Happy Tweening!

Link to comment
Share on other sites

5 hours ago, Rodrigo said:

Hi,

 

Just out of curiosity I created a SvelteKit project with TS using this with the TS setup:

npm create svelte@latest my-app

And this:

<script lang="ts">
  import Counter from './Counter.svelte';
  import welcome from '$lib/images/svelte-welcome.webp';
  import welcome_fallback from '$lib/images/svelte-welcome.png';
  import gsap from 'gsap';

  let tl: GSAPTimeline = gsap.timeline();
  tl.to({}, {});
</script>

Throws an unexpected token error on line 7 that is the colon after tl. Is this the recommended setup for SvelteKit with TS.

let tl: GSAPTimeline = gsap.timeline();
      ^

IDK if the setup is correct or not. I'd appreciate any input you can give us.

 

Happy Tweening!

Hi,
 

I wasn't able to reproduce, everything looks correct... 

Actually, I was expecting a different error, since Svelte can run both in the browser & the server, usually, you need to limit your code to a browser environment. Here's my usual setup:

 

	import Counter from './Counter.svelte';
	import welcome from '$lib/images/svelte-welcome.webp';
	import welcome_fallback from '$lib/images/svelte-welcome.png';

	import gsap from 'gsap';
	import { onDestroy, onMount } from 'svelte';

	let context:any;
	let tl: GSAPTimeline;

// Specifies this is running in the browser
	onMount(() => {
		context = gsap.context(() => {
			tl = gsap.timeline();
			tl.to({}, {});
		});
	});

	onDestroy(
		()=> {
			if(typeof context !== 'undefined'){
              context.revert();
              tl.clear();
			}
		}
	);


Of course, this would work without gsap.context but I have struggled in the past when having different animations across multiple components & pages, so that approach helps me keep everything tidy :)


I haven't found a way to specify a type f or context though. It seems it should be
 

let context:Context2

 

but I haven't found a way to import the Context2 type
 

Link to comment
Share on other sites

On 7/20/2023 at 8:30 PM, Rodrigo said:

I believe the import should be directly from gsap

import { GSAPTimeline } from "gsap";

Hello @Rodrigo,

I imported the types like this in next.js project but typescript is throwing an error stating Module "gsap" has no exported member 'GSAPTimeline' But the error that was throwing previously in tween is satisfied.

I tried importing like @InsenseVN suggested but this method is also not working.

import type GSAPTimeline  from 'gsap';

//Alternatively, depending...
import GSAPTimeline  from 'gsap';

This is how my code looks:

import SplitType from 'split-type'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

import { GSAPTimeline } from 'gsap'  // Module '"gsap"' has no exported member 'GSAPTimeline'. Did you mean to use 'import GSAPTimeline from "gsap"' instead ?

const MainHero = () => {
  let headingRef = useRef<HTMLHeadingElement | null>(null)

  useLayoutEffect(() => {
    if (headingRef.current) {
      const heading = SplitType.create(headingRef.current, {
        types: 'chars, words'
      })
    }

    const ctx = gsap.context(() => {
      const headingWord = gsap.utils.toArray('.word')

      const tl: GSAPTimeline = gsap.timeline()
      tl.from(headingRef.current?.children, {
        y: 80,
        autoAlpha: 0,
        duration: 1,
        ease: 'power4',
        stagger: '0.05'
      })
    }, headingRef)

    return () => ctx.revert()
  }, [])
  
  return (
    <>
      <h1 ref={headingRef} className='head font-manrope text-6xl font-semibold leading-tight text-dark'>
        A frontend developer passionate about creating beautiful user friendly UI
      </h1>
    </>
  )
  
  export default MainHero

 

Link to comment
Share on other sites

Hi @sagar_dev,

 

I just created a new NextJS project using the app router with this in the index page:

import { useEffect, useRef } from 'react'
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'

import gsap from "gsap";
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

import useIsomorphicLayoutEffect from "@/helpers/isomorphicLayout";

const inter = Inter({ subsets: ['latin'] })

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

export default function Home() {
  const ctx = useRef<gsap.Context>();

  useIsomorphicLayoutEffect(() => {
    ctx.current = gsap.context(() => {
      const tl: GSAPTimeline = gsap.timeline();
      tl.to({}, {});
      gsap.to(".logo-img", {
        duration: 3,
        rotation: 360,
        ease: "none",
        repeat: -1,
      })
    });

    return () => ctx.current?.revert();
  }, []);

  return (
    <>
    </>
  )
}

And the build command doesn't throw any error 🤷‍♂️

  • Like 1
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...