├── .babelrc ├── .gitignore ├── .npmignore ├── README.md ├── assets └── screenshot.png ├── dist ├── Animation.js ├── Choreographer.js ├── choreographer.min.js ├── defaultAnimations.js ├── getInjectedTransformString.js └── index.js ├── examples ├── one.html ├── three.html └── two.html ├── index.css ├── index.html ├── index.js ├── package.json ├── src ├── Animation.js ├── Choreographer.js ├── defaultAnimations.js ├── getInjectedTransformString.js └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "es2015" ] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /examples/ 2 | /src/ 3 | /assets/ 4 | webpack.config.js 5 | index.html 6 | index.js 7 | index.css 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Choreographer-js 2 | 3 | [![choreographer-js on NPM](https://img.shields.io/npm/v/choreographer-js.svg?style=flat-square)](https://www.npmjs.com/package/choreographer-js) 4 | 5 | A simple library to take care of complex CSS animations. 6 | *(You can also add custom functions that do non-CSS animations!)* 7 | 8 | [See the fancy demo here -->](https://christinecha.github.io/choreographer-js/) 9 | 10 | **Other examples:** 11 | [Basic Example (animating based on scroll location)](https://christinecha.github.io/choreographer-js/examples/one.html) 12 | [Basic Example (animating based on mouse X location)](https://christinecha.github.io/choreographer-js/examples/two.html) 13 | [Basic Example (multiple animations based on mouse X location)](https://christinecha.github.io/choreographer-js/examples/three.html) 14 | 15 | 16 | #### Table of Contents + Useful Links 17 | 1. [Quickstart](#quickstart) 18 | 2. [Use Cases + Snippets](#use-cases--snippets) 19 | 3. [Example Code](examples) 20 | 4. [Full API Reference](#full-api-reference) 21 | 5. [Contributing](#contributing) 22 | 6. [License](#license) 23 | 24 | 25 | ## Quickstart 26 | 27 | Install and save to your `package.json`: 28 | ``` 29 | $ npm install --save choreographer-js 30 | ``` 31 | 32 | Include it in your Javascript: 33 | ````js 34 | const Choreographer = require('choreographer-js') 35 | ```` 36 | 37 | 38 | ## Use Cases + Snippets 39 | 40 | **Brew up some instant scroll animations.** This one would scale a box's `opacity` from `0` to `1` mirroring your scroll location from the top to `1000`. [Full Example >>](examples/one.html) 41 | ````js 42 | let choreographer = new Choreographer({ 43 | animations: [ 44 | { 45 | range: [-1, 1000], 46 | selector: '#box', 47 | type: 'scale', 48 | style: 'opacity', 49 | from: 0, 50 | to: 1 51 | } 52 | ] 53 | }) 54 | 55 | window.addEventListener('scroll', () => { 56 | choreographer.runAnimationsAt(window.pageYOffset) 57 | }) 58 | ```` 59 | 60 | **What about animations based on mouse movement?** This would make `#box` move `300px` down if your mouse was in the left-half of the browser window. 61 | ````js 62 | let choreographer = new Choreographer({ 63 | animations: [ 64 | { 65 | range: [-1, window.innerWidth / 2], 66 | selector: '#box', 67 | type: 'change', 68 | style: 'transform:translateY', 69 | to: 300, 70 | unit: 'px' 71 | } 72 | ] 73 | }) 74 | 75 | document.body.addEventListener('mousemove', (e) => { 76 | choreographer.runAnimationsAt(e.clientX) 77 | }) 78 | ```` 79 | 80 | 81 | ## Get Started 82 | You can simply install the package via npm: 83 | ``` 84 | $ npm install --save choreographer-js 85 | ``` 86 | Or if you're keeping things super simple, just include [this file](dist/choreographer.min.js) as a script like so: 87 | ````html 88 | 89 | ```` 90 | 91 | Cool! Now you can create an instance of Choreographer like this, and run the animations based on whatever measurement floats your boat (ex. scroll position, mouse position, timestamp, whatever). 92 | ````js 93 | let choreographer = new Choreographer(config) 94 | choreographer.runAnimationsAt(position) 95 | ```` 96 | 97 | More often than not, you'll probably want to wrap that `runAnimationsAt` function in another, like an event handler, for instance: 98 | ````js 99 | window.addEventListener('scroll', () => { 100 | // then, use the scroll position (pageYOffset) to base the animations off of 101 | choreographer.runAnimationsAt(window.pageYOffset) 102 | }) 103 | ```` 104 | 105 | The easiest way to understand how this all works is to check out the [**examples**](examples). More detailed documentation below! 106 | 107 | ## Full API Reference 108 | 109 | ### `Choreographer` 110 | 111 | `[Class]` | The home base for everything. 112 | 113 | construction: 114 | `new Choreographer(` [`choreographerConfig`](#choreographerconfig) `)` 115 | 116 | public methods: 117 | - [`this.updateAnimations`](#update-animations) 118 | - [`this.runAnimationsAt`](#run-animations-at) 119 | 120 | --- 121 | 122 | ### `choreographerConfig` 123 | 124 | `[Object]` | The object used to configure an instance of Choreographer. 125 | 126 | example structure: 127 | ``` 128 | { 129 | customFunctions: { 130 | [animation type]: [animationFunction] 131 | }, 132 | animations: [ animationConfig, animationConfig, ... ] 133 | } 134 | ``` 135 | related references: [`animationFunction`](#animationfunction), [`animationConfig`](#animationconfig) 136 | 137 | --- 138 | 139 | ### `Choreographer.updateAnimations([ Array of` [`animationConfig`](#animationconfig) `])` 140 | 141 | `[Function]` | Replace `this.animations` with a new Array of `Animations`. 142 | 143 | --- 144 | 145 | ### `Choreographer.runAnimationsAt([ Number ])` 146 | 147 | `[Function]` | Run the animations at a given location marker. 148 | 149 | --- 150 | 151 | ### `Animation` 152 | 153 | `[Class]` | The class that manages each animation's data. 154 | 155 | construction: 156 | `new Animation(` [`animationConfig`](#animationconfig) `)` 157 | 158 | --- 159 | 160 | ### `animationConfig` 161 | 162 | `[Object]` | The object used to configure an instance of Animation. 163 | 164 | example structure: 165 | ``` 166 | { 167 | range: [0, 100], 168 | selector: '.box', 169 | type: 'scale', 170 | fn: [animationFunction], 171 | style: 'width', 172 | from: 0, 173 | to: 100, 174 | unit: '%' 175 | } 176 | ``` 177 | 178 | **`range`** | `[Array of Number]` or `[Array of Array of Number]` 179 | Either a one- or two-dimensional array of ranges, i.e. [0,5] or [[0,3], [4,5]] 180 | *NOTE: Bugs will occur if you overlap animation ranges that affect the same style properties!* 181 | 182 | **`type`** | `[String]` 183 | The name of the animation function 184 | 185 | **`fn`** | `[animationFunction]` 186 | see `animationFunction`](#animationfunction) 187 | 188 | **`selector`** | `[String]` or `[NodeList]` or `[DOM Element]` 189 | A valid DOM Element, list of elements, or selector string, ex. '.classname' or '#box .thing[data-attr=true]' 190 | 191 | **`selectors`** | `[Array]` 192 | An array of selector strings (as described above). 193 | 194 | *NOTE: Only one of the below (selector or selectors) is necessary. If they both exist, 'selectors' will be used.* 195 | 196 | **`style`** | `[String]` 197 | A valid CSS style property OR the string "class" to toggle a classname instead. 198 | *NOTE: If you are using 'transform', follow it with a colon and the property name, ex. 'transform:scaleX'* 199 | 200 | **`from`** | `[Number]` 201 | The minimum value to set to the style property. Useful when progressively calculating a value. 202 | 203 | **`to`** | `[Number or String]` 204 | If you want progressively calculated (scaled) values, this has to be a **number**. Otherwise, if for something a 'change' animation, this can be a string - whatever the valid type for the relevant `style` property is. 205 | 206 | related references: [`animationFunction`](#animationfunction) 207 | 208 | --- 209 | 210 | ### `animationFunction` 211 | 212 | `[Function]` | A function that takes [`animationData`](#animationdata) and does something with it. 213 | 214 | There are two built-in animation functions available, called 'scale' and 'change'. 215 | 216 | - 'scale' maps a progressively calculated value to the node's style property based on location 217 | - 'change' adds or takes away a style property value if you're in or out of range 218 | 219 | Example animationFunction (this is a simplified version of how 'change' works): 220 | ````js 221 | (data) => { 222 | // where data is an 'animationData' object (see below) 223 | const newValueString = data.to + data.unit 224 | 225 | if (data.progress > 0 && data.progress < 1) { 226 | data.node.style[data.style] = newValueString 227 | } 228 | } 229 | ```` 230 | 231 | arguments: [`animationData`](#animationdata) 232 | 233 | --- 234 | 235 | ### `animationData` 236 | 237 | `[Object]` | This is the data passed into an `animationFunction`. A lot of it is taken directly from `animationConfig`. 238 | 239 | Structure: 240 | ``` 241 | { 242 | node: [DOM Element] | the element this animation will affect, 243 | progress: [Number] | a number representing the relative location of a node within a range, 244 | 245 | // these are all taken directly from the animationConfig 246 | style: (see above), 247 | from: (see above), 248 | to: (see above), 249 | unit: (see above), 250 | } 251 | ``` 252 | 253 | **`Progress` is what allows for progressive scaling of values (ex. smooth fading of opacity, 2d translation, etc.)** 254 | If the value is between 0 and 1, that means you are within a range (given in animationConfig). 255 | 256 | --- 257 | 258 | ## Contributing 259 | 1. Fork it! 260 | 2. Create your feature branch: `git checkout -b my-new-feature` 261 | 3. Commit your changes: `git commit -am 'Add some feature'` 262 | 4. Push to the branch: `git push origin my-new-feature` 263 | 5. Submit a pull request :D 264 | 265 | Found an issue but don't know how to fix it? Submit an issue or email me. 266 | 267 | --- 268 | 269 | ## License 270 | 271 | The MIT License (MIT) 272 | Copyright (c) 2016 Christine Cha 273 | 274 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 275 | 276 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 277 | 278 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 279 | -------------------------------------------------------------------------------- /assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christinecha/choreographer-js/01694a9ab50e69f7d459b3ca2d9a5f6e4c56c776/assets/screenshot.png -------------------------------------------------------------------------------- /dist/Animation.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; 4 | 5 | var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 10 | 11 | /** The Animation class. 12 | * 13 | * constructed with the following config object properties: 14 | {String} type | the name of the animation function 15 | {Function} fn | the animation function 16 | {Array} range | either a one- or two-dimensional array of ranges, i.e. [0,5] or [[0,3], [4,5]] 17 | NOTE: Bugs will occur if you overlap animation ranges that affect the same style properties! 18 | 19 | [ Only one of the below (selector or selectors) is necessary. If they both exist, 'selectors' will be used. ] 20 | {String} selector | a valid DOM Element selector string, ex. '.classname' or '#box .thing[data-attr=true]' 21 | {Array} selectors | an array of selector strings (described above). 22 | 23 | {String} style | a valid CSS style property. 24 | NOTE: If you are using 'transform', follow it with a colon and the property name, ex. 'transform:scaleX' 25 | 26 | {Number} from | The minimum value to set to the style property. Useful when progressively calculating a value. 27 | {Number} to | The value to set to the style property. (Or the max, when progressively calculating a value.) 28 | NOTE: If you are ONLY using the 'to' value, like with a 'change' animation, this could also be {String} to. 29 | 30 | {String} unit | The unit string to append to the value, ex. '%', 'px', 'deg' 31 | **/ 32 | 33 | var Animation = function () { 34 | function Animation(config) { 35 | _classCallCheck(this, Animation); 36 | 37 | this.config = config; 38 | this.storeNodes(); 39 | } 40 | 41 | // Either use 'selector' or 'selectors' to find and store all the DOM nodes. 42 | 43 | 44 | _createClass(Animation, [{ 45 | key: 'storeNodes', 46 | value: function storeNodes() { 47 | var _this = this; 48 | 49 | if (this.config.selector) { 50 | 51 | if (typeof this.config.selector === 'string') { 52 | this.nodes = Array.prototype.slice.call(document.querySelectorAll(this.config.selector)); 53 | } else if (this.config.selector.length) { 54 | this.nodes = Array.prototype.slice.call(this.config.selector); 55 | } else { 56 | this.nodes = [this.config.selector]; 57 | } 58 | } 59 | 60 | if (this.config.selectors) { 61 | this.nodes = []; 62 | this.config.selectors.forEach(function (s) { 63 | 64 | if (typeof s === 'string') { 65 | var nodes = Array.prototype.slice.call(document.querySelectorAll(s)); 66 | _this.nodes = _this.nodes.concat(nodes); 67 | } else if (_this.config.selector.length) { 68 | _this.nodes = _this.nodes.concat(Array.prototype.slice.call(s)); 69 | } else { 70 | _this.nodes = _this.nodes.push(s); 71 | } 72 | }); 73 | } 74 | } 75 | 76 | // Just a helper to get the relative location of a value within a range. 77 | // example: getProgress(1, [0, 2]) = 0.5 78 | 79 | }, { 80 | key: 'getProgress', 81 | value: function getProgress(val, _ref) { 82 | var _ref2 = _slicedToArray(_ref, 2); 83 | 84 | var min = _ref2[0]; 85 | var max = _ref2[1]; 86 | 87 | return (val - min) / (max - min); 88 | } 89 | 90 | /** Returns the 'progress' - relative position within the animation range. 91 | * @param {Number} position | passed in value from 'runAt' (below) 92 | * @return {Number} progress | the relative location (between 0 and 1 when in range) within a range. 93 | if there are multiple ranges and the position is not in any of them, 94 | return -1. Otherwise, return the value (even if out of range). 95 | **/ 96 | 97 | }, { 98 | key: 'getProgressAt', 99 | value: function getProgressAt(position) { 100 | // If there are multiple ranges, then figure out which one is relevant and 101 | // calculate the progress within that one. You can't have multiple active 102 | // ranges unless they're overlapping -- in which case it is YOUR bug, dude. 103 | if (_typeof(this.config.range[0]) === 'object') { 104 | 105 | var activeRange = void 0; 106 | 107 | // If there's a range that is active, store it! 108 | this.config.range.forEach(function (r) { 109 | if (isBetween(postion, r[0], r[1])) activeRange = r; 110 | }); 111 | 112 | if (!activeRange) return -1;else return this.getProgress(position, activeRange); 113 | } 114 | 115 | return this.getProgress(position, this.config.range); 116 | } 117 | 118 | /** And this is where all of that work ~finally~ pays off! 119 | * This runs the animation by getting the relative progress and running accordingly. 120 | * @param {Number} position | the location marker - could be a scroll location, a timestamp, a mouseX position... 121 | **/ 122 | 123 | }, { 124 | key: 'runAt', 125 | value: function runAt(position) { 126 | var _this2 = this; 127 | 128 | var progress = this.getProgressAt(position); 129 | 130 | // If we are OUT OF RANGE, then we have to do a few extra things. 131 | if (progress < 0 || progress > 1) { 132 | 133 | // First, check if any of our nodes were already animated at this same style prop, at this same location. 134 | var animated = void 0; 135 | this.nodes.forEach(function (node) { 136 | if (node.getAttribute('animated').indexOf(_this2.config.style) > -1) animated = true; 137 | }); 138 | 139 | // If NOT, then you can go ahead and animate it here. 140 | // We need this checkpoint to avoid overriding each other. 141 | 142 | // If you're using class instead of style props, it don't matter. 143 | if (this.config.style === 'class' || !animated) { 144 | // If it's a simple 'change' function, we just need a value outside of 0 to 1. Could be -9.87. Doesn't matter. 145 | if (this.config.type === 'change') progress = -1; 146 | 147 | // If it's a 'scale' function, then get the min or max progress. 148 | if (this.config.type === 'scale') { 149 | if (progress < 0) progress = 0; 150 | if (progress > 1) progress = 1; 151 | } 152 | } else { 153 | 154 | // If we are OUT OF RANGE and some of our nodes are already animated, then get out of here!!!! 155 | return; 156 | } 157 | } 158 | 159 | // OK, finally ready? Run that animation, baby. 160 | this.nodes.forEach(function (node) { 161 | 162 | // If in range --- 163 | // (Notice that we're NOT doing >= and <= here. This is because if you're on the edges of the 164 | // range, you should be able to override this animation with another one.) 165 | if (progress > 0 && progress < 1) { 166 | node.setAttribute('animated', node.getAttribute('animated') + '|' + _this2.config.style); 167 | } 168 | 169 | _this2.config.fn({ 170 | node: node, 171 | style: _this2.config.style, 172 | from: _this2.config.from, 173 | to: _this2.config.to, 174 | unit: _this2.config.unit, 175 | progress: progress 176 | }); 177 | }); 178 | } 179 | }]); 180 | 181 | return Animation; 182 | }(); 183 | 184 | module.exports = Animation; -------------------------------------------------------------------------------- /dist/Choreographer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 4 | 5 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6 | 7 | var Animation = require('./Animation'); 8 | var defaultAnimations = require('./defaultAnimations'); 9 | 10 | // Store a no-op 11 | var noop = function noop() {}; 12 | 13 | /** Choreographer 14 | * constructed with a config object with the following keys and values: 15 | {Object} customFunctions | [optional] Keys are function names, values are animation functions. 16 | {Array} animations | An array of Animation class config objects. 17 | **/ 18 | 19 | var Choreographer = function () { 20 | function Choreographer(config) { 21 | var _this = this; 22 | 23 | _classCallCheck(this, Choreographer); 24 | 25 | this.customFunctions = config.customFunctions || {}; 26 | this.animations = config.animations.map(function (anim) { 27 | anim.fn = _this.getAnimationFn(anim.type); 28 | return new Animation(anim); 29 | }); 30 | } 31 | 32 | /** Helper to grab a function by its type. First try the defaults, then custom, then no-op. 33 | * @param {String} type | the name (or key value) of the animation function. 34 | **/ 35 | 36 | 37 | _createClass(Choreographer, [{ 38 | key: 'getAnimationFn', 39 | value: function getAnimationFn(type) { 40 | return defaultAnimations[type] || this.customFunctions[type] || noop; 41 | } 42 | 43 | /** If you need to update the animation configs at any point. 44 | * @param {Array} animations | An array of your new Animation class config objects. 45 | **/ 46 | 47 | }, { 48 | key: 'updateAnimations', 49 | value: function updateAnimations(animations) { 50 | var _this2 = this; 51 | 52 | // Wipe out the old animations and replace 'em. 53 | this.animations = animations.map(function (anim) { 54 | anim.fn = _this2.getAnimationFn(anim.type); 55 | return new Animation(anim); 56 | }); 57 | } 58 | 59 | /** Run those animations based on a given location! 60 | * @param {Number} position | the location marker - could be a scroll location, a timestamp, a mouseX position... 61 | **/ 62 | 63 | }, { 64 | key: 'runAnimationsAt', 65 | value: function runAnimationsAt(position) { 66 | 67 | // Clear all the nodes' 'animated' attribute. 68 | this.animations.forEach(function (anim) { 69 | anim.nodes.forEach(function (node) { 70 | return node.setAttribute('animated', ''); 71 | }); 72 | }); 73 | 74 | // Run and done. 75 | this.animations.forEach(function (anim) { 76 | return anim.runAt(position); 77 | }); 78 | } 79 | }]); 80 | 81 | return Choreographer; 82 | }(); 83 | 84 | module.exports = Choreographer; -------------------------------------------------------------------------------- /dist/choreographer.min.js: -------------------------------------------------------------------------------- 1 | !function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var e={};return n.m=t,n.c=e,n.p="/dist/",n(0)}([function(t,n,e){"use strict";var r=e(1);t.exports=r,window.Choreographer=r},function(t,n,e){"use strict";function r(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var o=function(){function t(t,n){for(var e=0;e1){var r=void 0;if(this.nodes.forEach(function(t){t.getAttribute("animated").indexOf(n.config.style)>-1&&(r=!0)}),r)return;"change"===this.config.type&&(e=-1),"scale"===this.config.type&&(e<0&&(e=0),e>1&&(e=1))}this.nodes.forEach(function(t){e>0&&e<1&&t.setAttribute("animated",t.getAttribute("animated")+"|"+n.config.style),n.config.fn({node:t,style:n.config.style,from:n.config.from,to:n.config.to,unit:n.config.unit,progress:e})})}}]),t}();t.exports=s},function(t,n,e){"use strict";var r=e(4),o=function(t){var n=(t.to-t.from)*t.progress+t.from,e=t.unit?n+t.unit:n;if(1===t.style.split(":").length)return void(t.node.style[t.style]=e);var o=t.style.split(":")[1];t.node.style.transform=r(t.node,o,e)},i=function(t){var n=t.progress<0?null:t.to,e=n&&t.unit?n+t.unit:n;if(t.progress<0&&"transition"===t.style)return void t.node.addEventListener("transitionend",function(n){n.target===t.node&&(t.node.style[t.style]=null)});if(1===t.style.split(":").length)return void(t.node.style[t.style]=e);var o=t.style.split(":")[1];t.node.style.transform=r(t.node,o,e)};t.exports={scale:o,change:i}},function(t,n){"use strict";var e={translateX:0,translateY:1,translateZ:2},r={scaleX:0,scaleY:1,scaleZ:2},o={transform:"transform",webkitTransform:"-webkit-transform",MozTransform:"-moz-transform",msTransform:"-ms-transform",OTransform:"-o-transform"},i=function(){if(!window.getComputedStyle)return null;var t=document.createElement("div");document.body.insertBefore(t,null);for(var n in o)if(window.getComputedStyle(t)[n])return document.body.removeChild(t),n;return document.body.removeChild(t),null},s=function(){if(!a)return!1;var t=document.createElement("div");document.body.insertBefore(t,null),t.style[a]="translate3d(1px,1px,1px)";var n=!!window.getComputedStyle(t).getPropertyValue(a);return document.body.removeChild(t),n},a=i(),u=s(),f=function(t,n,o){if(a){var i=t.style[a]||"",s=void 0,f=void 0,c=void 0;if(u&&(void 0!==e[n]?(f=e[n],n="translate3d",c=["0","0","0"],null===o&&(o=0)):void 0!==r[n]&&(f=r[n],n="scale3d",c=["1","1","1"],null===o&&(o=1)),void 0!==f)){if(i.indexOf(n)>-1){var l=(i.split(n+"(")[0],i.split(n+"(")[1].split(")")[0]);c=l.split(",")}c[f]=o,s=n+"("+c.join(",")+")"}var d=s||n+"("+o+")",m=i,y=i.indexOf(n)>-1;if(y){var v=i.split(n)[0],p=i.split(n)[1].split(")")[1];m=v+d+p}else m+=" "+d;return m}};t.exports=f}]); -------------------------------------------------------------------------------- /dist/defaultAnimations.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var getInjectedTransformString = require('./getInjectedTransformString'); 4 | 5 | /** @method scale 6 | * [built-in animation function] 7 | * Based on the data provided, your node will receive an updated, scaled style value. 8 | * 9 | * @param {Object} data : { 10 | * {Node} node | the node you want to modify 11 | * {String} style | the style property you want to modify 12 | * {Number} from | minimum value 13 | * {Number} to | maximum value 14 | * {Number} progress | a value between 0 and 1; the proportion of value we should use 15 | * {String} unit | optional - unit value, e.g. 'px' or '%' 16 | * } 17 | **/ 18 | var scale = function scale(data) { 19 | // Get the relative value (proportional to the min-max range you gave.) 20 | var scaledValue = (data.to - data.from) * data.progress + data.from; 21 | // Stick on the unit, if there is one. 22 | var scaledValueString = data.unit ? scaledValue + data.unit : scaledValue; 23 | 24 | // If it's a regular old style property, just replace the value. No fuss. 25 | if (data.style.split(':').length === 1) { 26 | data.node.style[data.style] = scaledValueString; 27 | return; 28 | } 29 | 30 | /*~~ If the style is a CSS transform, we gotta do some funky shit. ~~*/ 31 | var transformProp = data.style.split(':')[1]; 32 | data.node.style.transform = getInjectedTransformString(data.node, transformProp, scaledValueString); 33 | }; 34 | 35 | /** @method change 36 | * [built-in animation function] 37 | * Based on the data provided, your node will have the style value assigned or remok 38 | * @param {Object} data : { 39 | * {Node} node | the node you want to modify 40 | * {String} style | the style property you want to modify 41 | * {Value} to | the style value (number, string -- whatever valid type this CSS prop takes) 42 | * {Number} progress | a value between 0 and 1; the proportion of value we should use 43 | * } 44 | **/ 45 | var change = function change(data) { 46 | var newValue = data.progress < 0 ? null : data.to; 47 | var newValueString = newValue && data.unit ? newValue + data.unit : newValue; 48 | 49 | // If the progress is less than 0, we just need to nullify this style value. 50 | // But, if the style prop is 'transition', apply it only after the last transition ends. 51 | if (data.progress < 0 && data.style === 'transition') { 52 | data.node.addEventListener('transitionend', function (e) { 53 | if (e.target === data.node) data.node.style[data.style] = null; 54 | }); 55 | return; 56 | } 57 | 58 | // If it's a regular old style property, just replace the value. No fuss. 59 | if (data.style.split(':').length === 1) { 60 | if (data.style === 'class') { 61 | data.node.classList[newValue ? 'add' : 'remove'](data.to); 62 | return; 63 | } 64 | 65 | data.node.style[data.style] = newValueString; 66 | return; 67 | } 68 | 69 | /*~~ If the style is a CSS transform, we gotta do some funky shit. ~~*/ 70 | var transformProp = data.style.split(':')[1]; 71 | data.node.style.transform = getInjectedTransformString(data.node, transformProp, newValueString); 72 | }; 73 | 74 | module.exports = { scale: scale, change: change }; -------------------------------------------------------------------------------- /dist/getInjectedTransformString.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var translations = { 4 | translateX: 0, 5 | translateY: 1, 6 | translateZ: 2 7 | }; 8 | 9 | var scales = { 10 | scaleX: 0, 11 | scaleY: 1, 12 | scaleZ: 2 13 | }; 14 | 15 | var transformKeys = { 16 | 'transform': 'transform', 17 | 'webkitTransform': '-webkit-transform', 18 | 'MozTransform': '-moz-transform', 19 | 'msTransform': '-ms-transform', 20 | 'OTransform': '-o-transform' 21 | }; 22 | 23 | // Get the correct transform key value, either plain 'transform' or a prefixed one. 24 | var getTransformKey = function getTransformKey() { 25 | if (!window.getComputedStyle) return null; 26 | 27 | var el = document.createElement('div'); 28 | document.body.insertBefore(el, null); 29 | 30 | for (var t in transformKeys) { 31 | if (window.getComputedStyle(el)[t]) { 32 | document.body.removeChild(el); 33 | return t; 34 | } 35 | } 36 | 37 | document.body.removeChild(el); 38 | return null; 39 | }; 40 | 41 | // Check if we have 3d support 42 | var getHas3d = function getHas3d() { 43 | if (!transformKey) return false; // No transform, no 3d. GET A NEW BROWSER YO 44 | 45 | var el = document.createElement('div'); 46 | document.body.insertBefore(el, null); 47 | el.style[transformKey] = 'translate3d(1px,1px,1px)'; 48 | 49 | var has3d = !!window.getComputedStyle(el).getPropertyValue(transformKey); 50 | document.body.removeChild(el); 51 | 52 | return has3d; 53 | }; 54 | 55 | // Cache these values 56 | var transformKey = getTransformKey(); 57 | var has3d = getHas3d(); 58 | 59 | var getInjectedTransformString = function getInjectedTransformString(node, prop, val) { 60 | 61 | // If your browser doesn't support even prefixed transforms... get a new browser. Bye. 62 | if (!transformKey) return; 63 | 64 | // Get the node's previous transform value and store it. 65 | var oldTransformString = node.style[transformKey] || ''; 66 | 67 | // set up variable declarations for 3d stuff 68 | var transform3dString = void 0; 69 | var axis = void 0; 70 | var xyz = void 0; 71 | 72 | // If we've got 3d, then USE IT! It's sooo much smoother. #blessed 73 | if (has3d) { 74 | 75 | // If it's a translate or scale, we can 3d-ify that. (I know there's some duplication but I'd rather be explicit here.) 76 | 77 | // Axis is the index of the value we'll want to change (X is 0, Y is 1, Z is 3) 78 | // Prop is the name of the property 79 | // XYZ holds our actual values. 80 | if (translations[prop] !== undefined) { 81 | axis = translations[prop]; 82 | prop = 'translate3d'; 83 | xyz = ['0', '0', '0']; 84 | if (val === null) val = 0; 85 | } else if (scales[prop] !== undefined) { 86 | axis = scales[prop]; 87 | prop = 'scale3d'; 88 | xyz = ['1', '1', '1']; 89 | if (val === null) val = 1; 90 | } 91 | 92 | // If everything checks out, we should have our values set! 93 | if (axis !== undefined) { 94 | if (oldTransformString.indexOf(prop) > -1) { 95 | var startOfString = oldTransformString.split(prop + '(')[0]; 96 | var extractedValue = oldTransformString.split(prop + '(')[1].split(')')[0]; 97 | xyz = extractedValue.split(','); 98 | } 99 | 100 | // Replace the value in the array, then join that sucker together. 101 | xyz[axis] = val; 102 | transform3dString = prop + '(' + xyz.join(',') + ')'; 103 | } 104 | } 105 | 106 | // Make a nice new string out of it with the scaled value. 107 | var transformInjection = transform3dString || prop + '(' + val + ')'; 108 | 109 | var newTransformString = oldTransformString; 110 | 111 | // Check if the new prop is already declared somehow in the old style value 112 | var transformPropExists = oldTransformString.indexOf(prop) > -1; 113 | 114 | // Because if it is, you don't want to add another copy. 115 | if (transformPropExists) { 116 | var _startOfString = oldTransformString.split(prop)[0]; 117 | var endOfString = oldTransformString.split(prop)[1].split(')')[1]; 118 | newTransformString = _startOfString + transformInjection + endOfString; 119 | } 120 | // In the same vein, if it isn't, you can't just replace the value because there might 121 | // be some other transform properties hangin' out in there. 122 | else newTransformString += ' ' + transformInjection; 123 | 124 | return newTransformString; 125 | }; 126 | 127 | module.exports = getInjectedTransformString; -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var Choreographer = require('./Choreographer'); 4 | module.exports = Choreographer; 5 | 6 | window.Choreographer = Choreographer; -------------------------------------------------------------------------------- /examples/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Choreographer-JS | Example One 6 | 7 | 8 | 9 | 31 | 32 |

Animating based on scroll location.

33 |
34 | 35 | 36 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /examples/three.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Choreographer-JS | Example Three 6 | 7 | 8 | 9 | 33 | 34 |

Multiple animations based on mouse movement.

35 |
36 | 37 | 38 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /examples/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Choreographer-JS | Example Two 6 | 7 | 8 | 9 | 31 | 32 |

Animating based on mouse movement.

33 |
34 | 35 | 36 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | overflow: hidden; 4 | margin: 0 0; 5 | } 6 | 7 | body { 8 | height: 100%; 9 | overflow: auto; 10 | margin: 0 0; 11 | font-family: 'Rubik', sans-serif; 12 | background-color: #f5f5f5; 13 | } 14 | 15 | ::-webkit-scrollbar { display: none; } 16 | 17 | p { 18 | font-size: 13px; 19 | letter-spacing: 0.05em; 20 | } 21 | 22 | a { text-decoration: none; } 23 | 24 | #wrapper { 25 | height: 400vh; 26 | display: flex; 27 | justify-content: center; 28 | } 29 | 30 | .scroll-overlay { 31 | width: 100%; 32 | height: 100%; 33 | z-index: 99; 34 | position: relative; 35 | } 36 | 37 | #letters { 38 | position: fixed; 39 | text-align: center; 40 | top: 280px; 41 | width: 100%; 42 | } 43 | 44 | #letters div { 45 | display: inline-block; 46 | font-size: 50px; 47 | font-weight: 900; 48 | text-transform: uppercase; 49 | font-family: 'Rubik', sans-serif; 50 | transition: color 0.1s ease-in-out; 51 | } 52 | 53 | #letters .o { 54 | transition: none; 55 | } 56 | 57 | #letters .line { 58 | border-bottom-width: 8px; 59 | border-bottom-style: solid; 60 | border-color: #ff7474; 61 | width: 0.01%; 62 | 63 | opacity: 0; 64 | } 65 | 66 | .links { 67 | height: calc(100vh - 420px); 68 | text-align: center; 69 | } 70 | 71 | .links .quickstart { 72 | font-family: 'Inconsolata', monospace; 73 | background-color: #080808; 74 | color: white; 75 | padding: 20px; 76 | display: inline-block; 77 | margin: 0 auto; 78 | border-radius: 5px; 79 | } 80 | 81 | .links button { 82 | display: block; 83 | margin: 10px auto; 84 | padding: 10px; 85 | font-size: 10px; 86 | letter-spacing: 0.1em; 87 | text-transform: uppercase; 88 | text-decoration: none; 89 | background-color: #aaa; 90 | color: white; 91 | border: none; 92 | border-radius: 5px; 93 | cursor: pointer; 94 | } 95 | 96 | .links button:hover { 97 | background-color: #95cc21; 98 | } 99 | 100 | .scroll-down { 101 | width: 100%; 102 | position: fixed; 103 | top: 420px; 104 | text-align: center; 105 | } 106 | 107 | .scroll-down p { 108 | font-size: 9px; 109 | text-transform: uppercase; 110 | letter-spacing: 0.1em; 111 | } 112 | 113 | .down-arrow { 114 | width: 30px; 115 | height: 30px; 116 | 117 | display: inline-block; 118 | margin-top: -15px; 119 | opacity: 0.3; 120 | 121 | transform: rotateZ(45deg); 122 | border-bottom: 1px solid black; 123 | border-right: 1px solid black; 124 | } 125 | 126 | 127 | @media (max-width:660px) { 128 | #letters div { 129 | font-size: 38px; 130 | } 131 | } 132 | 133 | @media (max-width:500px) { 134 | #letters { top: 180px; } 135 | 136 | #letters div { font-size: 20px; } 137 | #letters .line { display: none; } 138 | #letters .description { padding: 20px; } 139 | 140 | .links { height: calc(100vh - 300px); } 141 | 142 | .links .quickstart { 143 | padding: 10px; 144 | font-size: 12px; 145 | } 146 | 147 | .scroll-down { top: 300px; } 148 | } 149 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Choreographer-js 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
c
20 |
h
21 |
o
22 |
r
23 |
e
24 |
o
25 |
g
26 |
r
27 |
a
28 |
p
29 |
h
30 |
e
31 |
r
32 |
-
33 |
j
34 |
s
35 | 36 |
37 |
38 | 39 |

40 | A simple library to take care of complex CSS animations. 41 |

42 |
43 |
44 |
45 | 46 |
47 |
48 | $ npm install --save choreographer-js 49 |
50 | 51 | 52 | 53 |
54 | 55 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var wrapperNode = document.getElementById('wrapper') 2 | var scrollDownNode = document.querySelector('.scroll-down') 3 | var linkNodes = document.querySelector('.links') 4 | 5 | var vh = window.innerHeight 6 | 7 | /* STORE SOME KEY LOCATIONS */ 8 | 9 | /* ~ le fin ~ 10 | * The point where you cannot scroll down any further. 11 | */ 12 | var fin = wrapperNode.clientHeight - vh + linkNodes.clientHeight 13 | 14 | function calculateAnimations() { 15 | return [ 16 | /* animate Cs */ 17 | { range: [-1, fin * 0.5], selector: '.c', type: 'scale', style: 'transform:translateY', from: 0, to: 25, unit: 'px' }, 18 | { range: [fin * 0.5, fin], selector: '.c', type: 'scale', style: 'transform:translateY', from: 25, to: 0, unit: 'px' }, 19 | { range: [fin * 0.4, fin], selector: '.c', type: 'change', style: 'color', to: '#ffb515' }, 20 | 21 | /* animate Hs */ 22 | { range: [-1, fin * 0.5], selector: '.h', type: 'scale', style: 'transform:scaleX', from: 1, to: 0.5 }, 23 | { range: [-1, fin * 0.5], selector: '.h', type: 'scale', style: 'transform:scaleY', from: 1, to: 0.5 }, 24 | { range: [fin * 0.5, fin], selector: '.h', type: 'scale', style: 'transform:scaleX', from: 0.5, to: 1 }, 25 | { range: [fin * 0.5, fin], selector: '.h', type: 'scale', style: 'transform:scaleY', from: 0.5, to: 1 }, 26 | { range: [fin * 0.3, fin], selector: '.h', type: 'change', style: 'color', to: '#1fd1ec' }, 27 | 28 | /* animate Os */ 29 | { range: [fin * 0.1, fin], selector: '.o', type: 'randomizeColor' }, 30 | 31 | /* animate Rs */ 32 | { range: [-1, fin * 0.5], selector: '.r', type: 'scale', style: 'transform:rotateX', from: 0, to: 90, unit: 'deg' }, 33 | { range: [fin * 0.5, fin], selector: '.r', type: 'scale', style: 'transform:rotateX', from: 90, to: 0, unit: 'deg' }, 34 | { range: [fin * 0.3, fin], selector: '.r', type: 'change', style: 'color', to: '#8382f9' }, 35 | 36 | /* animate Es */ 37 | { range: [fin * 0.3, fin], selector: '.e', type: 'change', style: 'color', to: '#ff1b9b' }, 38 | 39 | /* animate Gs */ 40 | { range: [-1, fin * 0.5], selectors: ['.g', '.j'], type: 'scale', style: 'transform:rotateZ', from: 0, to: 180, unit: 'deg' }, 41 | { range: [fin * 0.5, fin], selectors: ['.g', '.j'], type: 'scale', style: 'transform:rotateZ', from: 180, to: 360, unit: 'deg' }, 42 | { range: [fin * 0.4, fin], selectors: ['.g', '.j'], type: 'change', style: 'color', to: '#ff8b1c' }, 43 | 44 | /* animate As */ 45 | { range: [-1, fin * 0.5], selectors: ['.a', '.s'], type: 'scale', style: 'transform:rotateZ', from: 0, to: -180, unit: 'deg' }, 46 | { range: [fin * 0.5, fin], selectors: ['.a', '.s'], type: 'scale', style: 'transform:rotateZ', from: -180, to: -360, unit: 'deg' }, 47 | { range: [fin * 0.4, fin], selectors: ['.a', '.s'], type: 'change', style: 'color', to: '#c05bdb' }, 48 | 49 | /* animate Ps */ 50 | { range: [-1, fin * 0.5], selectors: ['.p', '.dash'], type: 'scale', style: 'opacity', from: 1, to: 0.1 }, 51 | { range: [fin * 0.5, fin], selectors: ['.p', '.dash'], type: 'scale', style: 'opacity', from: 0.1, to: 1 }, 52 | { range: [fin * 0.4, fin], selectors: ['.p', '.dash'], type: 'change', style: 'color', to: '#ff537c' }, 53 | 54 | /* animate line */ 55 | { range: [-1, fin], selector: '.line', type: 'scale', style: 'width', from: 0.01, to: 50, unit: '%' }, 56 | { range: [-1, fin], selector: '.line', type: 'scale', style: 'opacity', from: 0, to: 1 }, 57 | 58 | /* animate arrow */ 59 | { range: [0.6 * fin, fin], selector: '.scroll-down', type: 'scale', style: 'opacity', from: 1, to: 0 }, 60 | { range: [fin - 30, fin], selector: '.scroll-down', type: 'change', style: 'display', to: 'none' }, 61 | 62 | /* animate links */ 63 | { range: [0.8 * fin, fin], selector: '.links', type: 'scale', style: 'opacity', from: 0, to: 1 } 64 | ] 65 | } 66 | 67 | // Instantiate choreographer. 68 | var choreographer = new Choreographer({ 69 | animations: calculateAnimations(), 70 | customFunctions: { 71 | randomizeColor: function(data) { 72 | var chars = '0123456789abcdef'.split('') 73 | var hex = '#' 74 | 75 | while (hex.length < 7) { 76 | hex += chars[Math.round(Math.random() * (chars.length - 1))] 77 | } 78 | 79 | data.node.style.color = hex 80 | } 81 | } 82 | }) 83 | 84 | function animate() { 85 | var scrollPosition = (wrapperNode.getBoundingClientRect().top - wrapperNode.offsetTop) * -1 86 | choreographer.runAnimationsAt(scrollPosition) 87 | } 88 | 89 | document.body.addEventListener('scroll', animate) 90 | 91 | animate() 92 | 93 | window.addEventListener('resize', function() { 94 | choreographer.updateAnimations(calculateAnimations()) 95 | }) 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "choreographer-js", 3 | "version": "1.0.7", 4 | "description": "A simple library to take care of complicated animations.", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "build": "babel src --out-dir dist --watch", 8 | "dev": "concurrently --kill-others 'npm run build' 'webpack-dev-server'", 9 | "start": "open demo/index.html", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/christinecha/choreographer-js.git" 15 | }, 16 | "keywords": [ 17 | "animation", 18 | "library", 19 | "css", 20 | "scroll" 21 | ], 22 | "author": "Christine Cha (https://github.com/christinecha)", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/christinecha/choreographer-js/issues" 26 | }, 27 | "homepage": "https://github.com/christinecha/choreographer-js#readme", 28 | "devDependencies": { 29 | "babel": "^6.5.2", 30 | "babel-core": "^6.14.0", 31 | "babel-loader": "^6.2.5", 32 | "babel-preset-es2015": "^6.14.0", 33 | "concurrently": "^2.2.0", 34 | "uglify-loader": "^1.3.0", 35 | "webpack": "^1.13.2" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/Animation.js: -------------------------------------------------------------------------------- 1 | /** The Animation class. 2 | * 3 | * constructed with the following config object properties: 4 | {String} type | the name of the animation function 5 | {Function} fn | the animation function 6 | {Array} range | either a one- or two-dimensional array of ranges, i.e. [0,5] or [[0,3], [4,5]] 7 | NOTE: Bugs will occur if you overlap animation ranges that affect the same style properties! 8 | 9 | [ Only one of the below (selector or selectors) is necessary. If they both exist, 'selectors' will be used. ] 10 | {String} selector | a valid DOM Element selector string, ex. '.classname' or '#box .thing[data-attr=true]' 11 | {Array} selectors | an array of selector strings (described above). 12 | 13 | {String} style | a valid CSS style property. 14 | NOTE: If you are using 'transform', follow it with a colon and the property name, ex. 'transform:scaleX' 15 | 16 | {Number} from | The minimum value to set to the style property. Useful when progressively calculating a value. 17 | {Number} to | The value to set to the style property. (Or the max, when progressively calculating a value.) 18 | NOTE: If you are ONLY using the 'to' value, like with a 'change' animation, this could also be {String} to. 19 | 20 | {String} unit | The unit string to append to the value, ex. '%', 'px', 'deg' 21 | **/ 22 | 23 | class Animation { 24 | constructor(config) { 25 | this.config = config 26 | this.storeNodes() 27 | } 28 | 29 | // Either use 'selector' or 'selectors' to find and store all the DOM nodes. 30 | storeNodes() { 31 | if (this.config.selector) { 32 | 33 | if (typeof this.config.selector === 'string') { 34 | this.nodes = Array.prototype.slice.call(document.querySelectorAll(this.config.selector)) 35 | } else if (this.config.selector.length) { 36 | this.nodes = Array.prototype.slice.call(this.config.selector) 37 | } else { 38 | this.nodes = [this.config.selector] 39 | } 40 | } 41 | 42 | if (this.config.selectors) { 43 | this.nodes = [] 44 | this.config.selectors.forEach(s => { 45 | 46 | if (typeof s === 'string') { 47 | const nodes = Array.prototype.slice.call(document.querySelectorAll(s)) 48 | this.nodes = this.nodes.concat(nodes) 49 | } else if (this.config.selector.length) { 50 | this.nodes = this.nodes.concat(Array.prototype.slice.call(s)) 51 | } else { 52 | this.nodes = this.nodes.push(s) 53 | } 54 | }) 55 | } 56 | } 57 | 58 | // Just a helper to get the relative location of a value within a range. 59 | // example: getProgress(1, [0, 2]) = 0.5 60 | getProgress(val, [min, max]) { 61 | return (val - min) / (max - min) 62 | } 63 | 64 | /** Returns the 'progress' - relative position within the animation range. 65 | * @param {Number} position | passed in value from 'runAt' (below) 66 | * @return {Number} progress | the relative location (between 0 and 1 when in range) within a range. 67 | if there are multiple ranges and the position is not in any of them, 68 | return -1. Otherwise, return the value (even if out of range). 69 | **/ 70 | getProgressAt(position) { 71 | // If there are multiple ranges, then figure out which one is relevant and 72 | // calculate the progress within that one. You can't have multiple active 73 | // ranges unless they're overlapping -- in which case it is YOUR bug, dude. 74 | if (typeof this.config.range[0] === 'object') { 75 | 76 | let activeRange 77 | 78 | // If there's a range that is active, store it! 79 | this.config.range.forEach(r => { 80 | if (isBetween(postion, r[0], r[1])) activeRange = r 81 | }) 82 | 83 | if (!activeRange) return -1 84 | else return this.getProgress(position, activeRange) 85 | } 86 | 87 | return this.getProgress(position, this.config.range) 88 | } 89 | 90 | /** And this is where all of that work ~finally~ pays off! 91 | * This runs the animation by getting the relative progress and running accordingly. 92 | * @param {Number} position | the location marker - could be a scroll location, a timestamp, a mouseX position... 93 | **/ 94 | runAt(position) { 95 | let progress = this.getProgressAt(position) 96 | 97 | // If we are OUT OF RANGE, then we have to do a few extra things. 98 | if (progress < 0 || progress > 1) { 99 | 100 | // First, check if any of our nodes were already animated at this same style prop, at this same location. 101 | let animated 102 | this.nodes.forEach(node => { 103 | if (node.getAttribute('animated').indexOf(this.config.style) > -1) animated = true 104 | }) 105 | 106 | // If NOT, then you can go ahead and animate it here. 107 | // We need this checkpoint to avoid overriding each other. 108 | 109 | // If you're using class instead of style props, it don't matter. 110 | if (this.config.style === 'class' || !animated) { 111 | // If it's a simple 'change' function, we just need a value outside of 0 to 1. Could be -9.87. Doesn't matter. 112 | if (this.config.type === 'change') progress = -1 113 | 114 | // If it's a 'scale' function, then get the min or max progress. 115 | if (this.config.type === 'scale') { 116 | if (progress < 0) progress = 0 117 | if (progress > 1) progress = 1 118 | } 119 | } else { 120 | 121 | // If we are OUT OF RANGE and some of our nodes are already animated, then get out of here!!!! 122 | return 123 | } 124 | } 125 | 126 | // OK, finally ready? Run that animation, baby. 127 | this.nodes.forEach(node => { 128 | 129 | // If in range --- 130 | // (Notice that we're NOT doing >= and <= here. This is because if you're on the edges of the 131 | // range, you should be able to override this animation with another one.) 132 | if (progress > 0 && progress < 1) { 133 | node.setAttribute('animated', node.getAttribute('animated') + '|' + this.config.style) 134 | } 135 | 136 | this.config.fn({ 137 | node: node, 138 | style: this.config.style, 139 | from: this.config.from, 140 | to: this.config.to, 141 | unit: this.config.unit, 142 | progress: progress 143 | }) 144 | }) 145 | } 146 | } 147 | 148 | module.exports = Animation 149 | -------------------------------------------------------------------------------- /src/Choreographer.js: -------------------------------------------------------------------------------- 1 | const Animation = require('./Animation') 2 | const defaultAnimations = require('./defaultAnimations') 3 | 4 | // Store a no-op 5 | const noop = () => {} 6 | 7 | 8 | /** Choreographer 9 | * constructed with a config object with the following keys and values: 10 | {Object} customFunctions | [optional] Keys are function names, values are animation functions. 11 | {Array} animations | An array of Animation class config objects. 12 | **/ 13 | class Choreographer { 14 | constructor(config) { 15 | this.customFunctions = config.customFunctions || {} 16 | this.animations = config.animations.map(anim => { 17 | anim.fn = this.getAnimationFn(anim.type) 18 | return new Animation(anim) 19 | }) 20 | } 21 | 22 | /** Helper to grab a function by its type. First try the defaults, then custom, then no-op. 23 | * @param {String} type | the name (or key value) of the animation function. 24 | **/ 25 | getAnimationFn(type) { 26 | return defaultAnimations[type] || this.customFunctions[type] || noop 27 | } 28 | 29 | /** If you need to update the animation configs at any point. 30 | * @param {Array} animations | An array of your new Animation class config objects. 31 | **/ 32 | updateAnimations(animations) { 33 | // Wipe out the old animations and replace 'em. 34 | this.animations = animations.map(anim => { 35 | anim.fn = this.getAnimationFn(anim.type) 36 | return new Animation(anim) 37 | }) 38 | } 39 | 40 | /** Run those animations based on a given location! 41 | * @param {Number} position | the location marker - could be a scroll location, a timestamp, a mouseX position... 42 | **/ 43 | runAnimationsAt(position) { 44 | 45 | // Clear all the nodes' 'animated' attribute. 46 | this.animations.forEach(anim => { 47 | anim.nodes.forEach(node => node.setAttribute('animated', '')) 48 | }) 49 | 50 | // Run and done. 51 | this.animations.forEach(anim => anim.runAt(position)) 52 | } 53 | } 54 | 55 | module.exports = Choreographer 56 | -------------------------------------------------------------------------------- /src/defaultAnimations.js: -------------------------------------------------------------------------------- 1 | const getInjectedTransformString = require('./getInjectedTransformString') 2 | 3 | /** @method scale 4 | * [built-in animation function] 5 | * Based on the data provided, your node will receive an updated, scaled style value. 6 | * 7 | * @param {Object} data : { 8 | * {Node} node | the node you want to modify 9 | * {String} style | the style property you want to modify 10 | * {Number} from | minimum value 11 | * {Number} to | maximum value 12 | * {Number} progress | a value between 0 and 1; the proportion of value we should use 13 | * {String} unit | optional - unit value, e.g. 'px' or '%' 14 | * } 15 | **/ 16 | const scale = (data) => { 17 | // Get the relative value (proportional to the min-max range you gave.) 18 | const scaledValue = ((data.to - data.from) * data.progress) + data.from 19 | // Stick on the unit, if there is one. 20 | const scaledValueString = data.unit ? scaledValue + data.unit : scaledValue 21 | 22 | // If it's a regular old style property, just replace the value. No fuss. 23 | if (data.style.split(':').length === 1) { 24 | data.node.style[data.style] = scaledValueString 25 | return 26 | } 27 | 28 | /*~~ If the style is a CSS transform, we gotta do some funky shit. ~~*/ 29 | const transformProp = data.style.split(':')[1] 30 | data.node.style.transform = getInjectedTransformString(data.node, transformProp, scaledValueString) 31 | } 32 | 33 | /** @method change 34 | * [built-in animation function] 35 | * Based on the data provided, your node will have the style value assigned or remok 36 | * @param {Object} data : { 37 | * {Node} node | the node you want to modify 38 | * {String} style | the style property you want to modify 39 | * {Value} to | the style value (number, string -- whatever valid type this CSS prop takes) 40 | * {Number} progress | a value between 0 and 1; the proportion of value we should use 41 | * } 42 | **/ 43 | const change = (data) => { 44 | const newValue = data.progress < 0 ? null : data.to 45 | const newValueString = newValue && data.unit ? newValue + data.unit : newValue 46 | 47 | // If the progress is less than 0, we just need to nullify this style value. 48 | // But, if the style prop is 'transition', apply it only after the last transition ends. 49 | if (data.progress < 0 && data.style === 'transition') { 50 | data.node.addEventListener('transitionend', (e) => { 51 | if (e.target === data.node) data.node.style[data.style] = null 52 | }) 53 | return 54 | } 55 | 56 | // If it's a regular old style property, just replace the value. No fuss. 57 | if (data.style.split(':').length === 1) { 58 | if (data.style === 'class') { 59 | data.node.classList[newValue ? 'add' : 'remove'](data.to) 60 | return 61 | } 62 | 63 | data.node.style[data.style] = newValueString 64 | return 65 | } 66 | 67 | /*~~ If the style is a CSS transform, we gotta do some funky shit. ~~*/ 68 | const transformProp = data.style.split(':')[1] 69 | data.node.style.transform = getInjectedTransformString(data.node, transformProp, newValueString) 70 | } 71 | 72 | module.exports = { scale, change } 73 | -------------------------------------------------------------------------------- /src/getInjectedTransformString.js: -------------------------------------------------------------------------------- 1 | const translations = { 2 | translateX: 0, 3 | translateY: 1, 4 | translateZ: 2 5 | } 6 | 7 | const scales = { 8 | scaleX: 0, 9 | scaleY: 1, 10 | scaleZ: 2 11 | } 12 | 13 | const transformKeys = { 14 | 'transform':'transform', 15 | 'webkitTransform':'-webkit-transform', 16 | 'MozTransform':'-moz-transform', 17 | 'msTransform':'-ms-transform', 18 | 'OTransform':'-o-transform' 19 | } 20 | 21 | // Get the correct transform key value, either plain 'transform' or a prefixed one. 22 | const getTransformKey = () => { 23 | if (!window.getComputedStyle) return null 24 | 25 | const el = document.createElement('div') 26 | document.body.insertBefore(el, null) 27 | 28 | for (var t in transformKeys) { 29 | if (window.getComputedStyle(el)[t]) { 30 | document.body.removeChild(el) 31 | return t 32 | } 33 | } 34 | 35 | document.body.removeChild(el) 36 | return null 37 | } 38 | 39 | // Check if we have 3d support 40 | const getHas3d = () => { 41 | if (!transformKey) return false // No transform, no 3d. GET A NEW BROWSER YO 42 | 43 | const el = document.createElement('div') 44 | document.body.insertBefore(el, null) 45 | el.style[transformKey] = 'translate3d(1px,1px,1px)' 46 | 47 | const has3d = !!window.getComputedStyle(el).getPropertyValue(transformKey) 48 | document.body.removeChild(el) 49 | 50 | return has3d 51 | } 52 | 53 | 54 | // Cache these values 55 | const transformKey = getTransformKey() 56 | const has3d = getHas3d() 57 | 58 | const getInjectedTransformString = (node, prop, val) => { 59 | 60 | // If your browser doesn't support even prefixed transforms... get a new browser. Bye. 61 | if (!transformKey) return 62 | 63 | // Get the node's previous transform value and store it. 64 | let oldTransformString = node.style[transformKey] || '' 65 | 66 | // set up variable declarations for 3d stuff 67 | let transform3dString 68 | let axis 69 | let xyz 70 | 71 | // If we've got 3d, then USE IT! It's sooo much smoother. #blessed 72 | if (has3d) { 73 | 74 | // If it's a translate or scale, we can 3d-ify that. (I know there's some duplication but I'd rather be explicit here.) 75 | 76 | // Axis is the index of the value we'll want to change (X is 0, Y is 1, Z is 3) 77 | // Prop is the name of the property 78 | // XYZ holds our actual values. 79 | if (translations[prop] !== undefined) { 80 | axis = translations[prop] 81 | prop = 'translate3d' 82 | xyz = ['0','0','0'] 83 | if (val === null) val = 0 84 | 85 | } else if (scales[prop] !== undefined) { 86 | axis = scales[prop] 87 | prop = 'scale3d' 88 | xyz = ['1','1','1'] 89 | if (val === null) val = 1 90 | } 91 | 92 | // If everything checks out, we should have our values set! 93 | if (axis !== undefined) { 94 | if (oldTransformString.indexOf(prop) > -1) { 95 | const startOfString = oldTransformString.split(`${prop}(`)[0] 96 | const extractedValue = oldTransformString.split(`${prop}(`)[1].split(')')[0] 97 | xyz = extractedValue.split(',') 98 | } 99 | 100 | // Replace the value in the array, then join that sucker together. 101 | xyz[axis] = val 102 | transform3dString = `${prop}(${xyz.join(',')})` 103 | } 104 | } 105 | 106 | // Make a nice new string out of it with the scaled value. 107 | const transformInjection = transform3dString || `${prop}(${val})` 108 | 109 | let newTransformString = oldTransformString 110 | 111 | // Check if the new prop is already declared somehow in the old style value 112 | const transformPropExists = oldTransformString.indexOf(prop) > -1 113 | 114 | // Because if it is, you don't want to add another copy. 115 | if (transformPropExists) { 116 | const startOfString = oldTransformString.split(prop)[0] 117 | const endOfString = oldTransformString.split(prop)[1].split(')')[1] 118 | newTransformString = startOfString + transformInjection + endOfString 119 | } 120 | // In the same vein, if it isn't, you can't just replace the value because there might 121 | // be some other transform properties hangin' out in there. 122 | else newTransformString += ' ' + transformInjection 123 | 124 | return newTransformString 125 | } 126 | 127 | module.exports = getInjectedTransformString 128 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const Choreographer = require('./Choreographer') 2 | module.exports = Choreographer 3 | 4 | window.Choreographer = Choreographer 5 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | 3 | module.exports = { 4 | entry: "./dist", 5 | output: { 6 | publicPath: "/dist/", 7 | path: __dirname + "/dist/", 8 | filename: "choreographer.min.js" 9 | }, 10 | module: { 11 | test: /\*.js/, 12 | loader: "babel-loader", 13 | exclude: "/node_modules/" 14 | }, 15 | plugins: [ 16 | new webpack.optimize.UglifyJsPlugin({ 17 | compress: { warnings: false } 18 | }) 19 | ] 20 | } 21 | --------------------------------------------------------------------------------