Skip to content

Instantly share code, notes, and snippets.

@thedgbrt

thedgbrt/setTimeoutEasing.js

Last active August 29, 2015 14:10
Show Gist options
  • Save thedgbrt/1b963f28096ae3ae93e0 to your computer and use it in GitHub Desktop.
Save thedgbrt/1b963f28096ae3ae93e0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thedgbrt revised this gist Dec 6, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion setTimeoutEasing.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@
    myLoop();
    }
    i++;
    }, 0);
    }, time);
    }
    myLoop();
    }
  2. thedgbrt created this gist Dec 6, 2014.
    46 changes: 46 additions & 0 deletions setTimeoutEasing.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    // self-invoking function
    // main idea from here http://stackoverflow.com/questions/12081547/applying-easing-to-settimeout-delays-within-a-loop
    // easing functions from here https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
    (function(){

    var time = 0;
    var diff = 12;

    var minTime = 1;
    var maxTime = 100;

    var elList = document.querySelectorAll("li, h1, h2, h3, h4, h5, h6, p");

    if(elList.length>0){
    var i = 0;

    function myLoop () {
    setTimeout(function () {
    var el = elList[i];
    var elOldClass = el.className;
    el.className = elOldClass.concat(" appear");
    if (i < elList.length-1){
    time = noEasing(i, minTime, maxTime, diff);
    myLoop();
    }
    i++;
    }, 0);
    }
    myLoop();
    }

    function noEasing (t, b, c, d) {
    return c * t / d + b;
    }
    function easeInOutQuad(t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
    }
    function easeInOutExpo(t, b, c, d) {
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    }

    })();