JS libraries via NPM

At a glance

The community member is trying to use the Motion One animation library with Webstudio, but is having trouble importing it. They have successfully used the Anime.js library, but are unsure how to import Motion One, as the documentation only mentions using npm. Other community members suggest using a CDN like jsDelivr or unpkg to access the library without npm. They provide example code for using Motion One with a CDN, but the community member is still unable to get it working. The community members suggest that the issue may be with the way the library is being imported, and provide some alternative approaches, but there is no explicitly marked answer.

Useful resources

NNateaúx

Hello, I'm trying out different animation libraries with webstudio. I've gotten anime.js working easily with

Plain Text

<script src="https://cdn.jsdelivr.net/gh/juliangarnier/anime@b471ced746e4488b0e53587bbdd5999f7af2f668/lib/anime.min.js">
</script>

However, I would like to try out motion one before committing to the library. Motion one's docs only say to use npm to install it, however I can't find anywhere on webstudio's documentation how to do this.
How can I import this library?

11 comments

OOleg Isonen

you can find npm package e.g. https://www.npmjs.com/package/motion

OOleg Isonen

then go to jsdelivr or https://unpkg.com/

OOleg Isonen

unpkg gives you examples how to find any library there

OOleg Isonen

https://unpkg.com/[email protected]/dist/motion.min.js

OOleg Isonen

all files https://unpkg.com/browse/[email protected]/dist/

NNateaúx

Oh amazing thank you, I wasn't able to find any version, let alone the .min version!
With anime.js I have this working script that moves any .element class right when the page loads:

Plain Text

<script src="https://cdn.jsdelivr.net/gh/juliangarnier/anime@b471ced746e4488b0e53587bbdd5999f7af2f668/lib/anime.min.js"></script>

<script>
  anime({
    targets: ".element",
    translateX: 50,
    duration: 1500,
  });
</script>

I took your link here: https://unpkg.com/[email protected]/dist/motion.min.js
and converted it to jsdelivr: https://cdn.jsdelivr.net/npm/[email protected]/dist/motion.min.js

and implemented it in the same way like this:

Plain Text

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/motion.min.js">
</script>

<script>
 import animate from "motion"
 
  animate(".element", { x: 50 }, { duration: 1.5 })
</script>

I must be missing something simple because its not working with or without the import animate from "motion" line

OOleg Isonen

you don't need import there

OOleg Isonen

it should have a globally defined name

OOleg Isonen

alternative is to import from that url using import promise syntax

NNateaúx

Its very odd, I've tried a number of other libraries imported the same way and those are working great, just couldn't get this one working. Making good progress with another library now tho, thank you!

OOleg Isonen

this one is fine as well, shouldn't be any problem

Add a reply

Join the Webstudio community

JS libraries via NPM