Jump to content


gsap code in svelte won't work

Recommended Posts



I have created as simple code to move at to left=300, lioek this:


<div id="box"></div>
    import gsap from 'gsap';
    gsap.to("#box", {x: 300, duration: 1});
    #box {
        width: 100px;
        height: 100px;
        background: black;




When I run this prgram I got the following error:



Cannot read properties of undefined (reading 'querySelectorAll')
TypeError: Cannot read properties of undefined (reading 'querySelectorAll')
    at toArray (C:\Users\Svein Tore Narvestad\Documents\svelte\my-app\node_modules\gsap\dist\gsap.js:621:106)
    at new Tween (C:\Users\Svein Tore Narvestad\Documents\svelte\my-app\node_modules\gsap\dist\gsap.js:2911:130)
    at Object.to (C:\Users\Svein Tore Narvestad\Documents\svelte\my-app\node_modules\gsap\dist\gsap.js:3297:14)
    at test.svelte:4:9
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at Object.default (root.svelte:43:39)
    at eval (/.svelte-kit/runtime/components/layout.svelte:8:41)
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1770:22)
    at root.svelte:37:37
    at $$render (/node_modules/svelte/internal/index.mjs:1770:22)


Any suggestions?

Link to comment
Share on other sites

Yeah, you gotta tell Svelte to run that only when DOM is rendered.
just put it into the onMount function.

import { onMount } from 'svelte';
onMount(() => {
  gsap.to("#box", {x: 300, duration: 1});


Also I believe you will need to import gsap like this: 
import {gsap} from 'gsap/dist/gsap.js'

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

glad to be of help! 

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