[Feature] Svelte support

[lindamacdonald]

Would be fantastic to have support for Svelte.js :)

[mattgperry]

There is a WIP branch that I've been neglecting, I'll have to dig it out in the near future!

[mattgperry]

Tracking this on the Motion One project board https://github.com/orgs/motiondivision/projects/3/views/1

[kylesloper]

Is there any support for svelte at the moment? Currently throwing TypeError: Cannot read properties of undefined (reading 'startsWith') with a supposedly simple syntax:

  import { onMount } from 'svelte'
  import { timeline } from 'motion'

  onMount(async () => {
    const items = document.querySelector('.top_header_item')
    timeline([items, { x: 100 }, { duration: 1 }], { duration: 4 })
  })

Am I doing anything wrong or is the library just a no go for svelte projects?

[th-km]

Coming from framer-motion, I'd love to use Motion One with Svelte(Kit), especially to handle enter/exit animations.

[legowhales]

Hey, I use Motion One all the time with sveltekit.

There might be something wrong with your code.

You should have, with animate:

animate(items, { x: 100 }, { duration: 1 })

Or with timeline (an array of arrays):

timeline([ [items, { x: 100 }, { duration: 1 }] ])

[tiagoapp]

Anyone able to use the Svelte package? @mattgperry https://github.com/motiondivision/motionone/tree/main/packages/svelte

Tried to install it yarn add @motionone/svelte but then i'm unable to run it

import { Motion } from '@motionone/svelte';
import { Motion } from 'motion/svelte';
// none seems to work

[vite] Internal server error: Failed to resolve entry for package "@motionone/svelte". The package may have incorrect main/module/exports specified in its package.json

[mattgperry]

It’s not public or maintained so it’s quite possible it’s not in a working state

[sebastiangug]

anyone able to use this with svelte in any way succesfully? @legowhales how are you using it? any chance you could show how to bind the animate function to a HTML div/element? you do it with a unique ID? does that not change at compile time? are you able to bind the elements directly somehow?

[legowhales]

anyone able to use this with svelte in any way succesfully? @legowhales how are you using it? any chance you could show how to bind the animate function to a HTML div/element? you do it with a unique ID? does that not change at compile time? are you able to bind the elements directly somehow?

Well the best way is that I show you: https://codesandbox.io/p/sandbox/unruffled-brown-qdxn63

You'll see two ways to animate:

1. With use:action
2. By binding a variable bind:this={el}

[mattgperry]

This is now a wontfix, see https://github.com/motiondivision/motionone/discussions/241

Hopefully future maintainers will have more time to take a look at this one!