I've installed animejs with npm using
npm install animejs
<script>
import anime from 'animejs';
let heroTimeline = anime.timeline({autoplay: true});
let heroAnimation = {
targets: "#hero grow",
opacity: {
value: [0, 1],
duration: 800,
easing: 'easeOutExpo',
},
scale: {
value: [0, 1],
duration: 1000,
easing: 'easeOutElastic(1, .8)',
}
}
</script>
This code throws the following error:
ReferenceError: window is not defined
at makePromise (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:927:19)
at anime (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:933:17)
at Function.timeline (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:1264:12)
at index.svelte:4:39
at Object.$$render (D:\Sync\Web\portfolio-website\node_modules\svelte\internal\index.js:1684:22)
at Object.default (root.svelte:38:46)
at Object.default (/src/routes/__layout.svelte:12:50)
at eval (/src/lib/ThemeContext.svelte:46:41)
at Object.$$render (D:\Sync\Web\portfolio-website\node_modules\svelte\internal\index.js:1684:22)
at eval (/src/routes/__layout.svelte:11:100)
I also get the same error from importing from 'animejs/lib/anime.js' and 'animejs/lib/anime.min.js'.
If I try importing from 'animejs/lib/anime.es.js' I get the following error:
D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.es.js:1310
export default anime;
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at nodeRequire (D:\Sync\Web\portfolio-website\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66556:17)
at ssrImport (D:\Sync\Web\portfolio-website\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66498:20)
Any ideas on how to fix it. Other than this the project is the default svelte skeleton project generated by svelte-kit.
Try to use onMount function for exemple:
<script>
import { onMount } from 'svelte';
import anime from 'animejs';
onMount(() => {
let heroTimeline = anime.timeline({autoplay: true});
</script>
in onMount function you can use vanilla javascrpt