Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
anim8js - npm Package Compare versions
Comparing version 1.0.0 to 1.0.6
| { | ||
| "name": "anim8js", | ||
| "version": "1.0.0", | ||
| "homepage": "https://github.com/Rekord/rekord", | ||
| "version": "1.0.6", | ||
| "homepage": "https://github.com/anim8js/anim8js", | ||
| "authors": [ | ||
| "Philip Diffenderfer <pdiffenderfer@gmail.com>" | ||
| ], | ||
| "description": "A javascript REST ORM that is offline and real-time capable http://rekord.github.io/rekord/", | ||
| "main": "build/rekord.js", | ||
| "description": "anim8js - Anim8 Everything", | ||
| "main": "build/anim8js.js", | ||
| "keywords": [ | ||
@@ -19,7 +19,7 @@ "javascript", | ||
| "**/.*", | ||
| "node_modules", | ||
| "bower_components", | ||
| "images", | ||
| "docs", | ||
| "test", | ||
| "tests" | ||
| "src" | ||
| ] | ||
| } |
@@ -30,4 +30,7 @@ 'use strict'; | ||
| './src/builders/!(_)*.js',, | ||
| './src/paths/PathDelta.js', | ||
| './src/paths/PathParametric.js', | ||
| './src/paths/!(_)*.js', | ||
| './src/springs/!(_)*.js', | ||
| './src/movie/*.js', | ||
| './src/**/_export.js', | ||
@@ -34,0 +37,0 @@ './src/parsing/*.js', |
| { | ||
| "name": "anim8js", | ||
| "version": "1.0.0", | ||
| "version": "1.0.6", | ||
| "description": "anim8js - Anim8 Everything", | ||
@@ -9,6 +9,6 @@ "author": "Philip Diffenderfer", | ||
| "type": "git", | ||
| "url": "git://github.com/ClickerMonkey/anim8js.git" | ||
| "url": "git://github.com/anim8js/anim8js.git" | ||
| }, | ||
| "scripts": { | ||
| "test": "gulp test" | ||
| "test": "nodeunit test" | ||
| }, | ||
@@ -32,4 +32,5 @@ "devDependencies": { | ||
| "jshint": "^2.9.2", | ||
| "merge-stream": "^1.0.0" | ||
| "merge-stream": "^1.0.0", | ||
| "nodeunit": "^0.10.2" | ||
| } | ||
| } |
185
README.md
@@ -1,5 +0,4 @@ | ||
| # anim8js | ||
| The ultimate javascript animation library. Animate everything - from objects to HTML elements. | ||
|  | ||
| Inspired by the [animate.css](http://daneden.github.io/animate.css/) library - anim8js includes all animations and allows you to leverage Javascript's power to animate in almost any imaginable way. | ||
| The ultimate javascript animation library. Animate everything - from HTML elements to objects like circles, sprites, or skeletons. | ||
@@ -9,137 +8,46 @@ It's as easy as `anim8( button ).play('tada ~0.5s 1.5s x4 z100ms ease-inout')` - which plays the `tada` animation | ||
| ### Features | ||
| 1. Play animations by name, name & modifiers, or by custom definition. | ||
| 2. Queue animations. | ||
| 3. Transition into a new animation in 6 different ways. | ||
| 4. Play multiple animations at once over different attributes. | ||
| 5. Springs. | ||
| 6. Animation sequences. | ||
| 7. Defer commands until an event occurs. | ||
| 8. Save animations to be used later. | ||
| 9. Modify animations with a delay, duration, repeats, sleeping between repeats, scale, and easing. | ||
| 10. Relative Values | ||
| 11. Physics | ||
| Attributes can be animated along a path, by using spring forces, or physical forces. | ||
| Attributes can be animated together or separately. | ||
| The values that define the paths, spring, and physical forces can be a constant value (ex: 0, {x:2, y:5}), a function which is evaluated during animation, a function which is evaluated at the beginning of an animation, the current value, or a value relative to the current value. | ||
| ### Concepts | ||
| - `Subject` = The thing being animated (an object, HTML element, etc). | ||
| - `Attribute` = an animatable property on a subject. | ||
| - `Calculator` = performs math operations for a data type (number, color, 2d/3d points, etc). | ||
| - `Easing` = a function which controls the velocity of the animation over time. | ||
| - `Path` = a set of points and an algorithm which computes a value at a given time. | ||
| - `Event` = animates a single value along a path with a delay, duration, # of repeats, a pause in between repititions, an easing, and a scale. | ||
| - `Spring` = a force which animates an attribute to a resting value. | ||
| - `Animation` = a set of events which can be played on an Animator. | ||
| - `Defer` = defers calling functions on an object until a certain event occurs. | ||
| - `Animator` = enables you to: play animations, queue animations, transition animations, tween attributes, add springs, and follow paths. | ||
| - `Animators` = a set of animators that can be used as it were a single Animator. | ||
| - `Sequence` = animators where animations can be played at a delay between each animator creating a sequence of animations. | ||
| - `Parser` = takes an animation definition and generates an Animation that can be played. | ||
| - `Factory` = builds an Animator for a specific data type. | ||
| ### Download Stats | ||
| ### Playing animations | ||
| - [NPM](http://npmcharts.com/compare/anim8js,anim8js-pixi,anim8js-jquery,anim8js-animate.css,anim8js-easel,anim8js-dom) | ||
| There are tons of different ways of playing animations. | ||
| - `animator.play( 'tada' )` = plays the tada animation on the animator. | ||
| - `animator.play( 'tada', {delay:500, duration:'1.5s'} )` = plays the tada animation with a delay of 500 milliseconds and duration of 1.5 seconds. | ||
| - `animator.play( 'tada ~500ms 1.5s' )` = same as above. | ||
| - `animator.play( 'tada ~500ms 1.5s', {duration:200} )` = same as above excepts overrides duration to 200 milliseconds. | ||
| - `animator.play( 'tada, bounceOut, zoomIn 2s' )` = plays tada, queues bounceOut and then zoomIn with a modified duration of 2 seconds. | ||
| - `animator.play( *animationDefinition* )` = plays a custom animation - see *Animation Definition*. | ||
| ### Documentation | ||
| ### Animation Modifiers | ||
| - [Developer Guide](docs/README.md) | ||
| - [Examples](http://anim8js.github.io/anim8js/examples.html) | ||
| - `duration`: a number in the string that doesn't start with a special character, ex: `2s`. | ||
| - `repeat`: a string or number starting with an x, ex: `x4`, `infinite`, `twice`. | ||
| - `sleep`: a string starting with a z, ex: `z4.5s`. | ||
| - `delay`: a string starting with a ~, ex: `~750ms`. | ||
| - `easing`: a string specifying an easing function, ex: `linear`, `ease-out`, `sqrt-yoyo`. | ||
| - `scale`: a string starting with !, ex: `!1.2`. | ||
| ### Installation | ||
| ### Animation Definitions | ||
| - Bower: `bower install anim8js` | ||
| - Node: `npm install anim8js` | ||
| - Download: [anim8js](https://raw.githubusercontent.com/anim8js/anim8js/master/build/anim8js.js) or [anim8js minified](https://raw.githubusercontent.com/anim8js/anim8js/master/build/anim8js.min.js) | ||
| You can pass these objects in the following formats to `anim8.save`, `anim8.animation`, `Animator.play`, `Animator.queue`, `Animator.transition`, `Animator.transitionInto`, `Sequence.play`, `Sequence.queue`, `Sequence.transition`, and `Sequence.transitionInto`. | ||
| ### Extensions | ||
| ```javascript | ||
| { // animates from current value to the following values | ||
| tweenTo: { | ||
| scale: 2, | ||
| opacity: 0 | ||
| } | ||
| } | ||
| { // sets the value when the animation starts | ||
| initial: { | ||
| origin: 'left center' | ||
| } | ||
| } | ||
| { // sets the value when the animation ends | ||
| final: { | ||
| visibility: 0 | ||
| } | ||
| } | ||
| { // animates along key frames at given percents - just like CSS keyframes! | ||
| keyframe: { | ||
| '0,20,40,60,80,100': { | ||
| opacity: 1, | ||
| easing: 'linear' | ||
| }, | ||
| '10,30,50,70,90': { | ||
| opacity: 2, | ||
| easing: 'quad' | ||
| } | ||
| } | ||
| } | ||
| { // similar to keyframe - more compact and without interstitial easings. | ||
| deltas: [0, 0.2, 1], | ||
| values: { | ||
| opacity: [1, 0, 1], | ||
| scale: [1, 1.2, 1] | ||
| } | ||
| } | ||
| ``` | ||
| - [anim8js-dom](http://github.com/anim8js/anim8js-dom) - animate HTML elements | ||
| - [anim8js-jquery](http://github.com/anim8js/anim8js-jquery) - animate HTML elements with [jQuery](http://jquery.com/) | ||
| - [anim8js-animate.css](http://github.com/anim8js/anim8js-animate.css) - [animate.css](https://daneden.github.io/animate.css/) inspired animations for HTML elements | ||
| - [anim8js-pixi](http://github.com/anim8js/anim8js-pixi) - animate [PixiJS](http://www.pixijs.com) display objects & shaders | ||
| - [anim8js-easel](http://github.com/anim8js/anim8js-easel) - animate [EaselJS](http://www.createjs.com/easeljs) objects | ||
| You can actually join multiple types of animation definitions into a single object! | ||
| ### Features | ||
| - Create your own animations | ||
| - Play animations by name, name & modifiers, or by custom definition | ||
| - Queue animations | ||
| - Transition into a new animation in 6 different ways | ||
| - Play multiple animations at once over different attributes | ||
| - Springs forces on an attribute given some rest value | ||
| - Sequential animations involving multiple subjects | ||
| - Defer animation commands until an event occurs | ||
| - Save animations to be used later | ||
| - Modify animations with a delay, duration, repeats, sleeping between repeats, scale, and easing | ||
| - Relative values (ex: '+20', '-100') | ||
| - Apply physical forces (velocity and/or acceleration) to an attribute | ||
| - An attribute can follow a path of points | ||
| - Keyframe animations | ||
| - Values used in paths, springs, and physics can be constants, functions that return a value at the beginning of the animation, functions that return a live value during the animation, or a value relative to the current value. | ||
| ```javascript | ||
| { | ||
| tweenTo: { | ||
| opacity: 0 | ||
| }, | ||
| keyframe: { | ||
| from: { | ||
| scale: {x:1, y:0.5} | ||
| }, | ||
| to: { | ||
| scale: 0 | ||
| } | ||
| }, | ||
| initial: { | ||
| origin: 'center top' | ||
| }, | ||
| final: { | ||
| visibility: 0 | ||
| } | ||
| } | ||
| ``` | ||
| ### jQuery Functions | ||
| A few functions are available for jQuery which will help you animate jQuery objects: | ||
| - `m8/anim8/animator`: returns an animator instance for the first element in the jQuery object. | ||
| - `m8s/anim8s/animators`: returns animators for all elements in the jQuery object. | ||
| - `dataPlay`: plays the animation specified in the `data-...` attribute for all elements in the jQuery object and returns a jQuery object which contains only elements that had a valid animation to play. | ||
| - `dataQueue`: queues the animation specified in the `data-...` attribute for all elements in the jQuery object and returns a jQuery object which contains only elements that had a valid animation to queue. | ||
| - `dataTransition`: transitions into the animation specified in the `data-...` attribute for all elements in the jQuery object and returns a jQuery object which contains only elements that had a valid animation to transition into. | ||
| For example if you have the following HTML: | ||
| ```html | ||
| <div id="box" data-intro="fadeIn ~5s" data-outro="flipOutX 0.5s">Hello World!</div> | ||
| ``` | ||
| You can play the specified animations with... | ||
| ```javascript | ||
| $('#box').dataPlay('intro').dataQueue('outro'); | ||
| ``` | ||
| ### FAQ | ||
@@ -157,4 +65,4 @@ > What are valid animation durations, delays, & sleeps? | ||
| - A function which accepts a delta value and returns a new delta value. | ||
| - A string which is the name of an existing easing in `anim8.easing`. | ||
| - A string in the format of `easing-easingType` where easing is an existing easing in `anim8.easing` and easingType is an existing type in `anim8.easingType` like *in*, *out*, *inout*, or *pong*. An example is 'sqrt-inout'. | ||
| - A string which is the name of an existing easing in `anim8.Easings`. | ||
| - A string in the format of `easing-easingType` where easing is an existing easing in `anim8.Easings` and easingType is an existing type in `anim8.EasingsTypes` like *in*, *out*, *inout*, or *pong*. An example is 'sqrt-inout'. | ||
| - An array of 4 values which represent control points for a bezier curve. | ||
@@ -164,4 +72,4 @@ | ||
| You can find the following defaults in `anim8.defaults`: | ||
| duration, easing, teasing, delay, sleep, repeat, scale, transitionTime, transitionDelta, transitionIntoDelta, | ||
| You can find the following defaults in `anim8.Defaults`: | ||
| duration, easing, teasing, delay, sleep, repeat, scale, transitionTime, transitionDelta, transitionIntoDelta, | ||
| transitionEasing, cache | ||
@@ -171,10 +79,7 @@ | ||
| - `Easing`: anim8.easing.myCustomEasing = function(x) { ... }; | ||
| - `Path`: anim8.path.myCustomPath = function(pathDefinition) { ... return *instance of anim8.Path* ... }; | ||
| - `Spring`: anim8.calculator.myCustomSpring = function(springDefinition) { ... return *instance of anim8.Spring* ... }; | ||
| - `Parser`: anim8.parser.myCustomParser = *instance of anim8.Parser*; | ||
| - `Easing`: anim8.Easings.myCustomEasing = function(x) { ... }; | ||
| - `Path`: anim8.Paths.myCustomPath = function(pathDefinition) { ... return *instance of anim8.Path* ... }; | ||
| - `Spring`: anim8.Springs.myCustomSpring = function(springDefinition) { ... return *instance of anim8.Spring* ... }; | ||
| - `Builder`: anim8.Builders.myCustomParser = *instance of anim8.Parser*; | ||
| - `Animation`: anim8.save( 'myAnimationName', *animation definition* ); | ||
| - `Calculator`: anim8.calculator.myCustomCalculator = *instance of anim8.Calculator*; | ||
| - `Calculator`: anim8.Calculators.myCustomCalculator = *instance of anim8.Calculator*; |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by18.73%
1003221
- Lines of code
- increased by18.09%
13850
Worsened metrics
- Dev dependency count
- increased by5.88%
18
- Number of lines in readme file
- decreased by-53.67%
82
No dependency changes