[Usage with typescript]

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
 

[Usage with typescript]

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';

 

[Usage with typescript]

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