Last Updated: February 25, 2016
·
782
· de_henne

Create and use moofx v3

moofx CSS3 is a JavaScript animation library, whenever it can, this library uses the CSS3 features of the browser.
It tried to avoid setTimeout. So, animations are fluid and work on weaker devices.

https://github.com/kamicane/moofx

To use moofx3 you have to create your own, at the Moment.

First, we need:

http://nodejs.org/
https://npmjs.org/

You can get it here: http://nodejs.org/download/

If nodejs is installed with npm we can start now.
(npm comes with nodejs now)

If you use git, you can check out the project directly to you:

git clone https://github.com/kamicane/moofx

Otherwise you have to download the zip and extract it.

After all, moofx needs some node packages.

npm install cubic-bezier
npm install prime
npm install elements

The last step is to execute the distribute file

./distribute

Now a usable moofx.js file is in the folder.
Embed this file in the usual way and have fun :-)

<script src="moofx.js"></script>

<script>
moofx( nodes ).animate({
    'background-color': '#ffa', 'color': 'black'
});
</script>

Have a fresh tip? Share with Coderwall community!

Post
Post a tip