#Use GSAP with Astro

14 messages · Page 1 of 1 (latest)

limber kestrel
#

Use GSAP with Astro

limber kestrel
#

Bump

gaunt lynx
#

Not sure, maybe you can create one gsap.ts file where you import everything. Export everything from this file and use this in both .astro files

limber kestrel
gaunt lynx
#

I wll try to make a stackblitz demo later

limber kestrel
#

Thanks, take your time!

versed galleon
#

Are you also calling .registerPlugin in all .astro files? I never used gsap but maybe that causes an issue?

#

I think what @gaunt lynx wants you to try is:

  1. create a file, ex. gsap.ts
  2. put the code in you have posted above
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
  1. add an export export { gsap }
  2. in your astro files import { gsap } from './gsap.ts'
    replace the path with the path to your actual file
gaunt lynx
#

Yes indeed!

gaunt lynx
#

@limber kestrel did you try this?

limber kestrel
#

Not yet, I didn’t have time to try it out. I will tomorrow

limber kestrel
#

Ok so I tried it like this:

gsap.ts:

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

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: true,
});

export { gsap, ScrollTrigger };

Animation1.astro:

<script>
  import { gsap, ScrollTrigger } from "../gsap.ts";
// GSAP animation1 code:
</script>

^ This works, but when I do the same in Animation2.astro like so:

<script>
  import { gsap, ScrollTrigger } from "../gsap.ts";
// GSAP animation2 code:
</script>

Everything breaks but in a "weird" way, GSAP is still being loaded but the animations are very bugged. If I do not import gsap in the second animation file, the second animation just doesn't work.

Also, I'm getting "An import path cannot end with a '.ts' extension. Consider importing '../gsap.js' instead.ts(2691)", can I just ignore this or?

limber kestrel
#

Bump

versed galleon
#

can you share more code please? Maybe the issue lies in the generated html + usage of GSAP. Please check your output HTML and make sure that this is supported by GSAP