├── .gitignore ├── package.json ├── LICENSE ├── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "appear-animation", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "dependencies": { 7 | "on-appear": "^1.1.6" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/luruke/appear-animation.git" 15 | }, 16 | "author": "Luigi De Rosa", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/luruke/appear-animation/issues" 20 | }, 21 | "homepage": "https://github.com/luruke/appear-animation#readme" 22 | } 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Luigi De Rosa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var OnAppear = require('on-appear'); 2 | 3 | var extend = function(obj, props) { 4 | var newObj = Object.create(obj); 5 | 6 | for(var prop in props) { 7 | if(props.hasOwnProperty(prop)) { 8 | newObj[prop] = props[prop]; 9 | } 10 | } 11 | 12 | return newObj; 13 | }; 14 | 15 | var AppearAnimation = { 16 | delay: 0, 17 | offset: 0, 18 | instances: [], 19 | elements: [], 20 | 21 | create: function(obj) { 22 | return extend(this, obj); 23 | }, 24 | 25 | init: function() { 26 | for (var i = 0; i < this.elements.length; i++) { 27 | var el = this.elements[i]; 28 | this.register(el); 29 | } 30 | }, 31 | 32 | prepare: function(el, instance) { 33 | // To implement 34 | }, 35 | 36 | run: function(el, instance) { 37 | // To implement 38 | }, 39 | 40 | register: function(el) { 41 | var _this = this; 42 | var instance = new OnAppear(el, { 43 | delay: this.delay, 44 | offset: this.offset, 45 | callback: function() { 46 | _this.run(el, this); 47 | } 48 | }); 49 | 50 | this.prepare(el, instance); 51 | this.instances.push(instance); 52 | }, 53 | 54 | destroy: function() { 55 | for (var i = 0; i < this.instances.length; i++) { 56 | this.instances[i].destroy(); 57 | } 58 | } 59 | }; 60 | 61 | module.exports = AppearAnimation; 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # appear-animation 2 | 3 | Fade Up example 4 | 5 | ```javascript 6 | var FadeUp = AppearAnimation.create({ 7 | offset: 100, 8 | delay: 250, 9 | elements: document.querySelectorAll('.card'), 10 | 11 | prepare: function(el, instance) { 12 | TweenLite.set(el, { opacity: 0, y: 100 }); 13 | }, 14 | 15 | run: function(el, instance) { 16 | TweenLite.to(el, 0.5, { opacity: 1, y: 0 }); 17 | } 18 | }); 19 | 20 | FadeUp.init(); 21 | ``` 22 | 23 | 24 | Complex animation w/ Siblings calculation and Barba.js 25 | 26 | ```javascript 27 | const AppearAnimation = require('appear-animation'); 28 | const Barba = require('barba.js'); 29 | const forEach = require('lodash/forEach'); 30 | 31 | function init(container) { 32 | var ShowCards = AppearAnimation.create({ 33 | offset: 50, 34 | delay: 250, 35 | elements: container.querySelectorAll('.card'), 36 | 37 | prepare: function(el, i) { 38 | el = $(el); 39 | i.title = el.find('.card__title'); 40 | i.content = el.find('.card__content'); 41 | i.code = el.find('.card__code'); 42 | i.bg = el.find('.card__bg'); 43 | i.image = el.find('.card__image img'); 44 | 45 | if (el.hasClass('card--imagefull')) { 46 | TweenLite.set(i.image, { y: 10, opacity: 0 }); 47 | } else { 48 | TweenLite.set(i.image, { x: 25, opacity: 0 }); 49 | } 50 | 51 | TweenLite.set(i.content, { opacity: 0 }); 52 | TweenLite.set(i.bg, { right: '100%' }); 53 | }, 54 | 55 | run: function(el, i) { 56 | const instances = this.getSiblings(el); 57 | 58 | let time = 0; 59 | forEach(instances, (instance) => { 60 | window.setTimeout(() => { 61 | this.runSingle(instance) 62 | }, time); 63 | 64 | time += 300; 65 | }); 66 | }, 67 | 68 | runSingle: function(i) { 69 | // i.el 70 | 71 | const tl = new TimelineLite(); 72 | tl.add('start'); 73 | tl.to(i.bg, 0.8, { right: '0%' }, 'start'); 74 | 75 | tl.add('afterblock') 76 | tl.to(i.image, 1, { opacity: 1 }, 'afterblock'); 77 | tl.to(i.image, 3, { x: 0, y: 0 }, 'afterblock'); 78 | 79 | tl.to(i.content, 1, { opacity: 1 }, 'afterblock+=0.5'); 80 | }, 81 | 82 | getSiblings: function(el) { 83 | const y = el.getBoundingClientRect().top; 84 | let sibilings = []; 85 | 86 | forEach(this.instances, (i) => { 87 | if (y === i.el.getBoundingClientRect().top) { 88 | sibilings.push(i); 89 | } 90 | }); 91 | 92 | return sibilings; 93 | } 94 | }); 95 | 96 | ShowCards.init(); 97 | } 98 | 99 | init(document.body); 100 | 101 | Barba.Dispatcher.on('newPageReady', (a, b, container) => { 102 | init(container); 103 | }); 104 | ``` 105 | --------------------------------------------------------------------------------