This was an experimental project. Not even close to be production ready. Learned a lot with it and so can you! I'll be happy to aswer anything, but no real support should be expected.
How to use
<script src="js/moon.min.js"></script> <script src="js/your-script.js"></script>
Moon would be useless if no body could use it. So, here is the reference of its methods
The main one
Moon("#selector" || HTMLCollection || NodeList]);
Moon() function is the main function of Moon.js. It accepts an array of CSS selectors, HTMLCollections or NodeLists and returns a Moon object. This magical object has some prototyped methods. What you can do with it? Animate everything, of course! How? Take a look:
Where magic is spelled
"delay": 500 (in milliseconds) and
"easing": "ease" to change the behavior of your animation. You don't even need to use prefixes.
To create chained animations, just use:
Yes, it's this simple.
There are callbacks too. Take a look at the EXAMPLES.md file.
Didn't you see? Let me repeat it for you
.loop(2 | "infinite" | "alternate");
So you want to loop your animations? Just use the
loop() method to set the loops as you want. You can pass an
integer as the number of times the animation will repeat or
"alternate". Use without moderation.
Let's the magic begin
In order to play a Moon.js animation, you must use
.play() plays (Ohh!) the animations that were defined using
.animate() and fires a callback function right at the end of everything.
The callback function will be fired at the end of each loop if you are looping with
We believe it's better to have a
play() method instead of playing the animation right after calling the
animate() method. With Moon, you can build your entire animation before playing it.
Hey you! Freeze!
If you want to pause animations, you can use
The only drawback compared to ultra-robust (and ultimately fat) animation frameworks is that Moon do not continues an easing function. So, it will play the easing from the beginning. This issue will be addressed in a future extension.
Not always you want to set some property you want to animate it. Using all the power of Moon to change CSS properties, the
.set() method will just work. Vendor prefixes headache not included.
.set() does not set a transition property for the elements, it do not erase it too. If you want to be sure that not a single property will be animated, set
null. We do this when an animation chain ends on Moon.
Go back, brother
Reset any animation or configuration done to a Moon object. Great if you want to start another animation with the same objects.
Styles applied to the element will not be reseted too. Just the properties of the Moon object itself.
See full examples on how to use Moon in the EXAMPLES.md file
You can create animations that are called after other animations, animations that affects many elements, chain complex animations or even a GUI that chains animations and plays it when you want. Your imagination is the limit.
- Fork it!
- Create your feature branch:
git checkout -b feature/my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin feature/my-new-feature
- Submit a pull request :D
Follow version logs and releases at the releases page
MIT, freak out.