Skip to content

Commit

Permalink
Refactor for non-destructive style attribute logic in Update() method. …
Browse files Browse the repository at this point in the history 
…Fixes #18
  • Loading branch information
Julian Lloyd committed Feb 28, 2014
1 parent 079144e commit 7354d66
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 13 deletions.
11 changes: 10 additions & 1 deletion CHANGELOG.md
View file
@@ -1,12 +1,21 @@
###### scrollReveal.js Changelog

### v0.0.4 February 28th, 2014

* scrollReveal no longer destroys the existing `style` attribute on revealed elements, but instead, now ammends the necessary reveal animation styles after any existing styles. **(Fixes #18)**

>**Note:** scrollReveal will still override any existing transition or transform in the `style` attribute.
### v0.0.3 February 22th, 2014

* removed `-moz-` & `-o-` from css transitions & transforms
* removed unecessary styles (with `-moz-` & `-o-`) from css transitions & transforms
* added top-line comment, intending it to be kept after minification

### v0.0.2 February 13th, 2014

* Added CHANGELOG
* Improved README

What’s New
----------
#### Manual Instantiation
Expand Down
9 changes: 6 additions & 3 deletions bower.json
View file
@@ -1,17 +1,20 @@
{
"name": "scrollReveal.js",
"version": "0.0.3",
"version": "0.0.4",
"homepage": "https://github.com/julianlloyd/scrollReveal.js",
"authors": [
"Julian Lloyd <julianlloyd@gmail.com>"
"Julian Lloyd <https://twitter.com/julianlloyd>"
],
"description": "A simple way to create and maintain how elements fade in, triggered when they enter the viewport.",
"main": ["scrollReveal.js"],
"keywords": [
"scrollReveal",
"animation",
"CSS",
"transition",
"JavaScript"
"JavaScript",
"scroll",
"reveal"
],
"license": "MIT",
"ignore": [
Expand Down
27 changes: 18 additions & 9 deletions scrollReveal.js
View file
@@ -1,11 +1,10 @@
/*! scrollReveal.js v0.0.3 | (c)2014 Julian Lloyd | MIT license */
/*
_ _ _____ _ _
| | | __ \ | | (_)
___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___
/ __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __|
\__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \
|___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ v.0.0.2
|___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ v.0.0.4
_/ |
|__/
Expand All @@ -18,10 +17,13 @@
Licensed under the MIT license.
http://www.opensource.org/licenses/mit-license.php
scrollReveal.js (c) 2014 Julian Lloyd
=============================================================================*/

/*! scrollReveal.js v0.0.4 (c) 2014 Julian Lloyd | MIT license */

/*===========================================================================*/


window.scrollReveal = (function (window) {

'use strict';
Expand Down Expand Up @@ -194,29 +196,36 @@ window.scrollReveal = (function (window) {
/*=============================================================================*/

update: function (el) {
var css = this.genCSS(el);
var css = this.genCSS(el);
var style = el.getAttribute('style');

This comment has been minimized.

Sign in to view

Copy link
@jlmakes

jlmakes Mar 5, 2014

Owner

The problem is here for issue #23

I failed to capture the starting style attribute once, but instead, captured it every time the update function was called—naturally, this resulted in unreliable (and just wrong) starting styles.

My solution is to create an array on the parent object, called styleBank which holds the original style attribute value—and only sets once:

 //  Capture original style attribute
      if (!this.styleBank[el]) {
        this.styleBank[el] = el.getAttribute('style');
      }

      var css   = this.genCSS(el);
      var style = this.styleBank[el];

The rest of the code more or less stays the same.

if (style != null) style += ";"; else style = "";

if (!el.getAttribute('data-scrollReveal-initialized')) {
el.setAttribute('style', css.initial);
el.setAttribute('style', style + css.initial);
el.setAttribute('data-scrollReveal-initialized', true);
}

if (!this.isElementInViewport(el, this.options.viewportFactor)) {
if (this.options.reset) {
el.setAttribute('style', css.initial + css.reset);
el.setAttribute('style', style + css.initial + css.reset);
}
return;
}

if (el.getAttribute('data-scrollReveal-complete')) return;

if (this.isElementInViewport(el, this.options.viewportFactor)) {
el.setAttribute('style', css.target + css.transition);
el.setAttribute('style', style + css.target + css.transition);
// Without reset enabled, we can safely remove the style tag
// to prevent CSS specificy wars with authored CSS.
if (!this.options.reset) {
setTimeout(function () {
el.removeAttribute('style');
if (style != "") {

This comment has been minimized.

Sign in to view

Copy link
@sonnypgs

sonnypgs Mar 3, 2014

Please have a look at issue #23.

This comment has been minimized.

Sign in to view

Copy link
@jlmakes

jlmakes Mar 5, 2014

Owner

See above Sonny, I found the problem.
el.setAttribute('style', style);
} else {
el.removeAttribute('style');
}
el.setAttribute('data-scrollReveal-complete',true);
}, css.totalDuration);
}
Expand Down

0 comments on commit 7354d66

Please sign in to comment.