nodejs support ?

[natcl]

Would it be possible to use this library within nodejs ? Specifically to work on object properties ?

[sploders101]

I would like to know the same thing. Planning on using it to animate stage lights and would prefer not to have to put it in the electron rendering process (for process scheduling reasons)

[C0dekid]

I would like to know if it's compatible with React Native mobile development. It's a nice framework to use!

[jeroenrinzema]

@natcl Could you specify a bit more how you would imagine to use Anime in NodeJS?

[C0dekid]

@jeroenrinzema I think he means to use this framework inside his react native projects. For example the animation for the letters or the click (firework effects) should be available for mobile development.

I would like to use this framework aswell to make my application with some nice effects and such.

[jeroenrinzema]

@C0dekid Ok, I will take a look at React Native and if we could support it.

[C0dekid]

@jeroenrinzema Thanks a lot! I hope it will be supported in the future, good luck and keep us in touch :-)

[natcl]

@jeroenrinzema I'm using Node.js to animate LED strips and screens via node-canvas (the Node.js equivalent of Canvas) and using this library to animate properties would be great !

[jeroenrinzema]

@C0dekid I have quickly been looking into React Native and some other animation libraries for React and ran into the following issue. React Native simulates a DOM this means that most API's that Anime uses are not available. I will keep looking into this but don't know if it would be plausible to add React Native support to Anime. If you know how we could overcome this problem would I love to hear it. 😊

[jeroenrinzema]

@natcl Thnx! I will take a look at this.

[MariusMeiners]

@jeroenrinzema i dont think an implementation in react-native is possible with this project since the GUI code gets compiled to native code at the end of the day. You would have to animate native UI components of the OS to get it to work and i dont think thats that easy for you to implement here. Also I'd generally suggest not to use JS animation in react-native as its relatively hard to get 60fps animations if you have a lot of business code on your js thread. You have the option to use the native drivers in react-native to run animations which is far superior.

[sploders101]

I have created environment checks to see if we are running in a node environment and disabling parts of the API if browser apis are not available. I opened a pull request, but it needs a bit more work, so I will be closing that and opening a new one by next week. Since js is an interpreted language that is compiled on-the-fly, encapsulating the unsupported apis in if statements means they never make it to the compiler, and should work fine.

[juliangarnier]

Should be fixed in v3.0.1 !

[Mat-thieu]

@juliangarnier I'm still getting

when using

var battery = {
  charged: '0%',
  cycles: 120
}

anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function () {
    console.log(battery);
  }
});

[colinsullivan]

To use this in Node.js for objects only, it's not just a matter of protecting all the DOM-specific calls.

For my use case, I'd want more control over the engine section, specifically to be able to limit the frame rate.

https://github.com/juliangarnier/anime/blob/master/src/index.js#L840

I'm used to using Tween.js which exposes an update method one can call on each frame.

Tween.js doesn't have as nice keyframing functionality which is what led me to anime.

I am animating LEDs.

[colinsullivan]

Here's getting it up and running within Node.js:

https://github.com/colinsullivan/anime/blob/node-experiment/src/index.js

The setTimeout logic was specific for my application and of course you'd want to find a cross-platform way to get the time but this demonstrates that the library is really not far from being able to run in Node.js without the DOM-specific features.

I would move from Tween.js because I like the anime interface better for keyframing.

@juliangarnier - any interest in supporting this Node.js object-only feature?

[juliangarnier]

It might be possible to simply check if a DOM-specific object or method is defined before using it. I'll keep this open and will see if it's possible to implement in the next release

[EriKWDev]

Any news/thoughts on this still? :) Just installed via npm and tried to animate the properties of a normal object and I'm getting all kinds of errors about window.Promise and document.<stuff> and whatnot. It seems like some simple checks could determine wether to enable support for DOM elements or use normal Promise instead of window.Promise.

My hopes were to use this amazing package that I'm used to using on the web to do some headless node-canvas animations. It would be great if it was supported!

[benallfree]

FYI when testing on React Native I'm still getting a NodeList error.

[qrdwtf]

FYI you can install jsdom-global package, then define globals:

global.SVGElement = class SVGElement { };
global.requestAnimationFrame = cb => setTimeout(_ => cb(Date.now()), 10);

And set suspendWhenDocumentHidden to false in anime configuration:

anime.suspendWhenDocumentHidden = false;

It's far from ideal but works 😄

[ScreamZ]

@juliangarnier Can we use this in NodeJS now ? I might need this library for animate DMX 512 element like a light or led.

@sploders101 have the same issue do you find a lib that works ?

[sploders101]

@ScreamZ Unfortunately, it appears I deleted my fork at some point, but it was wildly out of date, anyway. Essentially, what I did to fix it though was install it into NodeJS using npm and start calling the APIs. Whenever I got an error, I would find a polyfill for the particular feature it wanted and go edit the file to use it. For example, back then (this may still be the case), animejs used window.requestAnimationFrame(...), so I imported raf into the animejs source code to make it work.

Sorry I don't have more. I went on a fork-deleting spree earlier to de-clutter my repositories page and must have forgotten that fork actually had useful edits.

Side note: For patches like this, check out patch-package. It's a really useful tool that saves modifications you've made to dependencies and patches them when you run npm install on a fresh clone of the package.

[luni-moon]

@ScreamZ Unfortunately, it appears I deleted my fork at some point, but it was wildly out of date, anyway. Essentially, what I did to fix it though was install it into NodeJS using npm and start calling the APIs. Whenever I got an error, I would find a polyfill for the particular feature it wanted and go edit the file to use it. For example, back then (this may still be the case), animejs used window.requestAnimationFrame(...), so I imported raf into the animejs source code to make it work.

Sorry I don't have more. I went on a fork-deleting spree earlier to de-clutter my repositories page and must have forgotten that fork actually had useful edits.

Side note: For patches like this, check out patch-package. It's a really useful tool that saves modifications you've made to dependencies and patches them when you run npm install on a fresh clone of the package.

Thanks for letting us know of patch-package, That seems really useful!

[sploders101]

@ScreamZ Also, it's not my best work, but I actually had the same idea. If you're looking for other work in this area to take inspiration from, check out my repository made to control an ETC Element via OSC/UDP.

https://github.com/sploders101/ETC_EOS_Lights_Redesign/blob/master/src/plugins/fx/plugin.ts

[ScreamZ]

@ScreamZ Unfortunately, it appears I deleted my fork at some point, but it was wildly out of date, anyway. Essentially, what I did to fix it though was install it into NodeJS using npm and start calling the APIs. Whenever I got an error, I would find a polyfill for the particular feature it wanted and go edit the file to use it. For example, back then (this may still be the case), animejs used window.requestAnimationFrame(...), so I imported raf into the animejs source code to make it work. Sorry I don't have more. I went on a fork-deleting spree earlier to de-clutter my repositories page and must have forgotten that fork actually had useful edits. Side note: For patches like this, check out patch-package. It's a really useful tool that saves modifications you've made to dependencies and patches them when you run npm install on a fresh clone of the package.

Thanks for letting us know of patch-package, That seems really useful!

You can also use pnpm patch or yarn patch

@ScreamZ Also, it's not my best work, but I actually had the same idea. If you're looking for other work in this area to take inspiration from, check out my repository made to control an ETC Element via OSC/UDP.

https://github.com/sploders101/ETC_EOS_Lights_Redesign/blob/master/src/plugins/fx/plugin.ts

I need to animate some value for DMX 512 light system handled by a NodeJS app. I need sequencing on smoke machine, light, and various other things.

Thanks, In my search I've found the following:

• https://github.com/franciscop/ola (Not so useful in my case)
• https://github.com/popmotion/popmotion but with < 9 version (see popmotion pure), otherwise you lose the sequencing capabilities, like chaining, sequence, parallel, loop/
• https://github.com/nicolas-van/modern-async or https://github.com/caolan/async for sequencing promise
• https://github.com/node-dmx/dmx-ts Animation but tightly coupled

Basically I'm looking for https://reactnative.dev/docs/animated nodeJS portage xD

[juliangarnier]

Node.js will be fully supported in the upcoming V4!

[ScreamZ]

@juliangarnier Wonderful! Is any ETA expected? Maybe I can help with some tasks, just tell me :-)

[ScreamZ]

Hello @juliangarnier Is there any news on that ?

[juliangarnier]

V4 with Node support is currently in early access! No ETA for a public release yet, I'll release it once all the final details are sorted. https://github.com/sponsors/juliangarnier