Jump to content
Search Community

gsap FLIP plugin issues with svelte typescript.

y_springfield test
Moderator Tag

Recommended Posts

Greetings Everyone, hope you are fine. Please I'm faced with a difficulty.
I just created a basic sveltekit typescript template project.
Immediately installed gsap with flip plugin.
opened index.svelte and imported flip plugin as follows

	import { Flip } from 'gsap/Flip';

and compiled the application and it's failing with the error as shown in the image.595397849_Bildschirmfoto2021-06-19um3_35_47PM.thumb.png.11232b8f839ae3b77be01b85855f2345.png
 I've been unable to resolve it for close to a day now.
Please, can anyone help me on how to import gsap flip plugin in sveltekit properly.
if I import gsap it functions fine but not the flip plugin.
I've tried the solutions outlined here to no avail.

Link to comment
Share on other sites

Hi @y_springfield

 

I'm not familiar with sveltekit, but that error message looks like it doesn't support actual ES modules. Please look at the installation helper.

https://greensock.com/docs/v3/Installation?checked=core,flip#umd

 

import { gsap } from "gsap/dist/gsap";
import { Flip } from "gsap/dist/Flip";

gsap.registerPlugin(Flip);

 

1 hour ago, y_springfield said:

if I import gsap it functions fine but not the flip plugin.

 

The build is using gsap's package.json to get the correct file, so this...

import { gsap } from "gsap";

 

....actually becomes this behind the scenes.

const { gsap } = require("gsap/dist/gsap");

 

Unfortunately, build systems aren't smart enough to do the same for gsap's plugins. 😟

 

Some frameworks like nuxt allow you add a package for it to transpile, so you don't have specify the dist files. Perhaps sveltekit has something similar to that.

 

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