Last Updated: February 25, 2016
·
1.049K
· 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
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside