Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@apatheticwes/scrollify
Advanced tools
@apatheticwes/scrollify - npm Package Compare versions
Comparing version 0.4.7 to 0.5.0
@@ -319,8 +319,5 @@ 'use strict'; | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.active = false; | ||
| return this.disable(); | ||
| } | ||
| // if (!transform) { return new Error('Scrollify [error]: transforms not supported'); } | ||
| // if (!element) { return new Error('Scrollify [error]: could not find element'); } | ||
| this.element = element; | ||
@@ -340,4 +337,4 @@ this.ticking = false; | ||
| window.addEventListener('scroll', function (e) { return this$1.onScroll(e); }); | ||
| window.addEventListener('resize', function (e) { return this$1.onResize(e); }); | ||
| window.addEventListener('scroll', function () { return this$1.onScroll(); }, { passive: true }); | ||
| window.addEventListener('resize', function () { return this$1.onResize(); }, { passive: true }); | ||
| }; | ||
@@ -428,2 +425,3 @@ | ||
| var transforms = this.transforms; | ||
| var context = { options: options, element: element, transforms: transforms }; | ||
@@ -444,17 +442,4 @@ if (!scene) { | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| var curry = function (fn, options) { | ||
| return function() { // NOTE: don't use => function here as we do NOT want to bind "this" | ||
| var context = { | ||
| 'options': options, | ||
| 'element': element, | ||
| 'transforms': transforms | ||
| }; | ||
| fn.call(context, this); // eslint-disable-line | ||
| }; | ||
| }; | ||
| scene.effects.push(curry(fn, options)); | ||
| return this; | ||
@@ -508,4 +493,5 @@ }; | ||
| Scrollify$1.prototype.calculateDuration = function calculateDuration (scene) { | ||
| // if (typeof scene._duration === 'function') { return scene._duration(); } | ||
| scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| }; | ||
@@ -587,3 +573,3 @@ | ||
| scene.effects.forEach(function (effect) { | ||
| effect.call(progress); | ||
| effect(progress); | ||
| }); | ||
@@ -631,18 +617,2 @@ | ||
| // ----------------------------------------------------- | ||
| // IF we wished to perform rotation AFTER skew / position / etc, we could do it here. | ||
| // The ordering is important, and has an effect. | ||
| // if (t.rotationPost) { | ||
| // m.rotateX(t.rotationPost[0]); | ||
| // m.rotateY(t.rotationPost[1]); | ||
| // m.rotateZ(t.rotationPost[2]); | ||
| // } | ||
| // if (t.scalePost) { | ||
| // m.scale(t.scalePost[0], t.scalePost[1]); | ||
| // } | ||
| // ----------------------------------------------------- | ||
| // ... and here we put it back. (This duplication is not a mistake). | ||
@@ -818,3 +788,3 @@ if (t.transformOrigin) { | ||
| var element = this.element; | ||
| var currentState = '_'; | ||
| var currentState = element._currentState || null; // store prop on element | ||
@@ -830,6 +800,6 @@ if (progress <= 0) { | ||
| function setState(element, state) { | ||
| var BCR = element.getBoundingClientRect(); | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| var BCR = element.getBoundingClientRect(); | ||
| element.style.top = BCR.top + 'px'; | ||
@@ -844,7 +814,5 @@ element.style.left = BCR.left + 'px'; | ||
| element.className = ''; | ||
| // element.classList.remove(currentState); // TODO: why is this not working? | ||
| element.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| currentState = state; | ||
| element._currentState = state; | ||
| } | ||
@@ -851,0 +819,0 @@ } |
@@ -315,8 +315,5 @@ /** | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.active = false; | ||
| return this.disable(); | ||
| } | ||
| // if (!transform) { return new Error('Scrollify [error]: transforms not supported'); } | ||
| // if (!element) { return new Error('Scrollify [error]: could not find element'); } | ||
| this.element = element; | ||
@@ -336,4 +333,4 @@ this.ticking = false; | ||
| window.addEventListener('scroll', function (e) { return this$1.onScroll(e); }); | ||
| window.addEventListener('resize', function (e) { return this$1.onResize(e); }); | ||
| window.addEventListener('scroll', function () { return this$1.onScroll(); }, { passive: true }); | ||
| window.addEventListener('resize', function () { return this$1.onResize(); }, { passive: true }); | ||
| }; | ||
@@ -424,2 +421,3 @@ | ||
| var transforms = this.transforms; | ||
| var context = { options: options, element: element, transforms: transforms }; | ||
@@ -440,17 +438,4 @@ if (!scene) { | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| var curry = function (fn, options) { | ||
| return function() { // NOTE: don't use => function here as we do NOT want to bind "this" | ||
| var context = { | ||
| 'options': options, | ||
| 'element': element, | ||
| 'transforms': transforms | ||
| }; | ||
| fn.call(context, this); // eslint-disable-line | ||
| }; | ||
| }; | ||
| scene.effects.push(curry(fn, options)); | ||
| return this; | ||
@@ -504,4 +489,5 @@ }; | ||
| Scrollify$1.prototype.calculateDuration = function calculateDuration (scene) { | ||
| // if (typeof scene._duration === 'function') { return scene._duration(); } | ||
| scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| }; | ||
@@ -583,3 +569,3 @@ | ||
| scene.effects.forEach(function (effect) { | ||
| effect.call(progress); | ||
| effect(progress); | ||
| }); | ||
@@ -627,18 +613,2 @@ | ||
| // ----------------------------------------------------- | ||
| // IF we wished to perform rotation AFTER skew / position / etc, we could do it here. | ||
| // The ordering is important, and has an effect. | ||
| // if (t.rotationPost) { | ||
| // m.rotateX(t.rotationPost[0]); | ||
| // m.rotateY(t.rotationPost[1]); | ||
| // m.rotateZ(t.rotationPost[2]); | ||
| // } | ||
| // if (t.scalePost) { | ||
| // m.scale(t.scalePost[0], t.scalePost[1]); | ||
| // } | ||
| // ----------------------------------------------------- | ||
| // ... and here we put it back. (This duplication is not a mistake). | ||
@@ -814,3 +784,3 @@ if (t.transformOrigin) { | ||
| var element = this.element; | ||
| var currentState = '_'; | ||
| var currentState = element._currentState || null; // store prop on element | ||
@@ -826,6 +796,6 @@ if (progress <= 0) { | ||
| function setState(element, state) { | ||
| var BCR = element.getBoundingClientRect(); | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| var BCR = element.getBoundingClientRect(); | ||
| element.style.top = BCR.top + 'px'; | ||
@@ -840,7 +810,5 @@ element.style.left = BCR.left + 'px'; | ||
| element.className = ''; | ||
| // element.classList.remove(currentState); // TODO: why is this not working? | ||
| element.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| currentState = state; | ||
| element._currentState = state; | ||
| } | ||
@@ -847,0 +815,0 @@ } |
@@ -318,8 +318,5 @@ (function () { | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.active = false; | ||
| return this.disable(); | ||
| } | ||
| // if (!transform) { return new Error('Scrollify [error]: transforms not supported'); } | ||
| // if (!element) { return new Error('Scrollify [error]: could not find element'); } | ||
| this.element = element; | ||
@@ -339,4 +336,4 @@ this.ticking = false; | ||
| window.addEventListener('scroll', function (e) { return this$1.onScroll(e); }); | ||
| window.addEventListener('resize', function (e) { return this$1.onResize(e); }); | ||
| window.addEventListener('scroll', function () { return this$1.onScroll(); }, { passive: true }); | ||
| window.addEventListener('resize', function () { return this$1.onResize(); }, { passive: true }); | ||
| }; | ||
@@ -427,2 +424,3 @@ | ||
| var transforms = this.transforms; | ||
| var context = { options: options, element: element, transforms: transforms }; | ||
@@ -443,17 +441,4 @@ if (!scene) { | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| var curry = function (fn, options) { | ||
| return function() { // NOTE: don't use => function here as we do NOT want to bind "this" | ||
| var context = { | ||
| 'options': options, | ||
| 'element': element, | ||
| 'transforms': transforms | ||
| }; | ||
| fn.call(context, this); // eslint-disable-line | ||
| }; | ||
| }; | ||
| scene.effects.push(curry(fn, options)); | ||
| return this; | ||
@@ -507,4 +492,5 @@ }; | ||
| Scrollify.prototype.calculateDuration = function calculateDuration (scene) { | ||
| // if (typeof scene._duration === 'function') { return scene._duration(); } | ||
| scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| }; | ||
@@ -586,3 +572,3 @@ | ||
| scene.effects.forEach(function (effect) { | ||
| effect.call(progress); | ||
| effect(progress); | ||
| }); | ||
@@ -630,18 +616,2 @@ | ||
| // ----------------------------------------------------- | ||
| // IF we wished to perform rotation AFTER skew / position / etc, we could do it here. | ||
| // The ordering is important, and has an effect. | ||
| // if (t.rotationPost) { | ||
| // m.rotateX(t.rotationPost[0]); | ||
| // m.rotateY(t.rotationPost[1]); | ||
| // m.rotateZ(t.rotationPost[2]); | ||
| // } | ||
| // if (t.scalePost) { | ||
| // m.scale(t.scalePost[0], t.scalePost[1]); | ||
| // } | ||
| // ----------------------------------------------------- | ||
| // ... and here we put it back. (This duplication is not a mistake). | ||
@@ -817,3 +787,3 @@ if (t.transformOrigin) { | ||
| var element = this.element; | ||
| var currentState = '_'; | ||
| var currentState = element._currentState || null; // store prop on element | ||
@@ -829,6 +799,6 @@ if (progress <= 0) { | ||
| function setState(element, state) { | ||
| var BCR = element.getBoundingClientRect(); | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| var BCR = element.getBoundingClientRect(); | ||
| element.style.top = BCR.top + 'px'; | ||
@@ -843,7 +813,5 @@ element.style.left = BCR.left + 'px'; | ||
| element.className = ''; | ||
| // element.classList.remove(currentState); // TODO: why is this not working? | ||
| element.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| currentState = state; | ||
| element._currentState = state; | ||
| } | ||
@@ -850,0 +818,0 @@ } |
@@ -5,3 +5,3 @@ { | ||
| "license": "MIT", | ||
| "version": "0.4.7", | ||
| "version": "0.5.0", | ||
| "description": "A simple thing for triggering 'them scroll effects that everybody loves", | ||
@@ -22,3 +22,3 @@ "main": "./dist/scrollify.cjs.js", | ||
| "start": "http-server ./ -p 8080 -d", | ||
| "clean": "rm -f dist/*.js*", | ||
| "clean": "rimraf dist/*.js*", | ||
| "build": "npm run clean && npm run lint && rollup -c", | ||
@@ -31,8 +31,7 @@ "lint": "eslint source/js/*.js", | ||
| "http-server": "^0.9.0", | ||
| "rimraf": "^2.6.1", | ||
| "rollup": "^0.45.2", | ||
| "rollup-plugin-buble": "^0.12.1", | ||
| "rollup-plugin-uglify": "^1.0.1", | ||
| "tape": "^4.6.0", | ||
| "uglify-js": "^2.7.0" | ||
| "tape": "^4.6.0" | ||
| } | ||
| } |
| # Scrollify | ||
| Scrollify. Do things on scroll. 3KB minified and gzipped. | ||
| Scrollify. Do things on scroll. 3KB minified and gzipped. There are no dependencies; you do not need jQuery; you do not need TweenMax. | ||
@@ -46,2 +46,8 @@ ## What sorts of things? | ||
| ### 0.5 | ||
| * duration may be a function, a string, or a float | ||
| ### 0.4 | ||
| * further bug fixing and optimizations | ||
| ### 0.3 | ||
@@ -48,0 +54,0 @@ * start and duration can accept various parameter types: float, 'px', '%' |
@@ -158,3 +158,3 @@ /** | ||
| let element = this.element; | ||
| let currentState = '_'; | ||
| let currentState = element._currentState || null; // store prop on element | ||
@@ -170,6 +170,6 @@ if (progress <= 0) { | ||
| function setState(element, state) { | ||
| let BCR = element.getBoundingClientRect(); | ||
| if (currentState === state) { return; } | ||
| if (state == 'sticky') { | ||
| let BCR = element.getBoundingClientRect(); | ||
| element.style.top = BCR.top + 'px'; | ||
@@ -184,8 +184,6 @@ element.style.left = BCR.left + 'px'; | ||
| element.className = ''; | ||
| // element.classList.remove(currentState); // TODO: why is this not working? | ||
| element.classList.remove(currentState); | ||
| element.classList.add(state); | ||
| currentState = state; | ||
| element._currentState = state; | ||
| } | ||
| } |
@@ -28,8 +28,5 @@ /* | ||
| console.log('Scrollify [error] ', arguments[0]); | ||
| return this.active = false; | ||
| return this.disable(); | ||
| } | ||
| // if (!transform) { return new Error('Scrollify [error]: transforms not supported'); } | ||
| // if (!element) { return new Error('Scrollify [error]: could not find element'); } | ||
| this.element = element; | ||
@@ -49,4 +46,4 @@ this.ticking = false; | ||
| window.addEventListener('scroll', (e) => this.onScroll(e)); | ||
| window.addEventListener('resize', (e) => this.onResize(e)); | ||
| window.addEventListener('scroll', () => this.onScroll(), { passive: true }); | ||
| window.addEventListener('resize', () => this.onResize(), { passive: true }); | ||
| } | ||
@@ -133,2 +130,3 @@ | ||
| const transforms = this.transforms; | ||
| const context = { options, element, transforms }; | ||
@@ -149,17 +147,4 @@ if (!scene) { | ||
| scene._applyTransform = scene._applyTransform || fn._applyTransform; | ||
| scene.effects.push(fn.bind(context)); | ||
| const curry = (fn, options) => { | ||
| return function() { // NOTE: don't use => function here as we do NOT want to bind "this" | ||
| let context = { | ||
| 'options': options, | ||
| 'element': element, | ||
| 'transforms': transforms | ||
| }; | ||
| fn.call(context, this); // eslint-disable-line | ||
| }; | ||
| }; | ||
| scene.effects.push(curry(fn, options)); | ||
| return this; | ||
@@ -213,4 +198,5 @@ } | ||
| calculateDuration(scene) { | ||
| // if (typeof scene._duration === 'function') { return scene._duration(); } | ||
| scene.duration = this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| scene.duration = (typeof scene._duration === 'function') ? | ||
| scene._duration(scene._trigger) : | ||
| this.mapTo(scene._duration, window.innerHeight + this.element.offsetHeight); | ||
| } | ||
@@ -292,3 +278,3 @@ | ||
| scene.effects.forEach((effect) => { | ||
| effect.call(progress); | ||
| effect(progress); | ||
| }); | ||
@@ -336,18 +322,2 @@ | ||
| // ----------------------------------------------------- | ||
| // IF we wished to perform rotation AFTER skew / position / etc, we could do it here. | ||
| // The ordering is important, and has an effect. | ||
| // if (t.rotationPost) { | ||
| // m.rotateX(t.rotationPost[0]); | ||
| // m.rotateY(t.rotationPost[1]); | ||
| // m.rotateZ(t.rotationPost[2]); | ||
| // } | ||
| // if (t.scalePost) { | ||
| // m.scale(t.scalePost[0], t.scalePost[1]); | ||
| // } | ||
| // ----------------------------------------------------- | ||
| // ... and here we put it back. (This duplication is not a mistake). | ||
@@ -354,0 +324,0 @@ if (t.transformOrigin) { |
Sorry, the diff of this file is not supported yet
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 by9.67%
849677
- Dev dependency count
- decreased by-14.29%
6
- Number of package files
- increased by4.65%
45
- Lines of code
- increased by48.17%
5884
- Number of lines in readme file
- increased by10.71%
62
No dependency changes