Skip to content

Instantly share code, notes, and snippets.

@rogeruiz

rogeruiz/animationEngine.js

Last active August 29, 2015 14:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rogeruiz/f35b498fa80d07b1dc1f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rogeruiz/f35b498fa80d07b1dc1f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rogeruiz revised this gist May 26, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -174,7 +174,7 @@ Fn.prototype.getAllBooks = function( svg ) {
    break;
    case 1:
    queue.push( `rotate(45, ${cx}, ${cy})` );
    queue.push( `rotate(90, ${cx}, ${cy}), translate(${-width}, 0)` );
    queue.push( `rotate(90, ${cx}, ${cy}), translate(${-width}, 0)` );
    break;
    default:
    queue.push( `rotate(35, ${cx}, ${cy})` );
  2. rogeruiz revised this gist May 13, 2015. No changes.
  3. rogeruiz revised this gist May 13, 2015. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -258,11 +258,11 @@ Fn.prototype.fadeIn = function( items, done ) {
    var fn = this;
    if ( items.length > 0 ) {
    var item = items.shift();
    item.animate({
    item.animate( {
    opacity: 1
    }, fn.ANIMATION_DURATION, function() {
    fn.fadeIn( items, done );
    });
    } );
    } else {
    if ( $.isFunction( done ) ) {
    done();
    @@ -279,17 +279,17 @@ Fn.prototype.bounceIn = function( items, done ) {
    var x = item.select( 'circle' ).attr( 'cx' ) * ( scaleFactor - 1 );
    var y = item.select( 'circle' ).attr( 'cy' ) * ( scaleFactor - 1 );

    item.animate({
    item.animate( {
    transform: `translate(${-x}, ${-y}) scale(${scaleFactor})`,
    opacity: 0.85
    }, quarterTime, function() {
    item.animate({
    item.animate( {
    transform: 'scale(1)',
    opacity: 1
    }, fn.ANIMATION_DURATION, mina.bounce, function() {
    fn.bounceIn( items, done );
    });
    });
    } );
    } );
    } else {
    if ( $.isFunction( done ) ) {
    done();
  4. rogeruiz revised this gist May 13, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -240,12 +240,12 @@ Fn.prototype.animateTracks = function( icons, done ) {
    cover.animate( {
    opacity: 0.8
    }, fn.ANIMATION_DURATION, function() {
    mark.animate({
    mark.animate( {
    opacity: 1,
    'stroke-dashoffset': 10
    }, fn.ANIMATION_DURATION, function() {
    fn.animateTracks(icons, done);
    });
    } );
    } );
    } else {
    if ( $.isFunction( done ) ) {
  5. rogeruiz revised this gist May 13, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -237,7 +237,7 @@ Fn.prototype.animateTracks = function( icons, done ) {
    var icon = icons.shift();
    var cover = icon.select( '#cis-circle-cover' );
    var mark = icon.select( '#cis-check-mark' );
    cover.animate({
    cover.animate( {
    opacity: 0.8
    }, fn.ANIMATION_DURATION, function() {
    mark.animate({
    @@ -246,7 +246,7 @@ Fn.prototype.animateTracks = function( icons, done ) {
    }, fn.ANIMATION_DURATION, function() {
    fn.animateTracks(icons, done);
    });
    });
    } );
    } else {
    if ( $.isFunction( done ) ) {
    done();
  6. rogeruiz revised this gist May 13, 2015. No changes.
  7. rogeruiz revised this gist May 13, 2015. 1 changed file with 25 additions and 25 deletions.
    50 changes: 25 additions & 25 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,27 +19,27 @@ var Fn = function() {
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    window.setTimeout( function() {
    fn.toppleBooks( ctx.books );
    }, fn.DELAY_START);
    }, fn.DELAY_START );
    }
    },
    'siteCoordinator': {
    init: function() {
    var svg = this.getSvg();
    this.coordinator = fn.getCoordinator( svg );
    this.coordinator.attr({
    this.coordinator.attr( {
    transform: 'translate(50, 0)',
    opacity: 0
    });
    } );
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    ctx.coordinator.animate({
    ctx.coordinator.animate( {
    transform: 'translate(0, 0)',
    opacity: 1
    }, fn.ANIMATION_DURATION);
    }, fn.ANIMATION_DURATION );
    }, fn.DELAY_START);
    }
    },
    @@ -56,11 +56,11 @@ var Fn = function() {
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    window.setTimeout( function() {
    fn.fadeIn(ctx.icons, function() {
    fn.rotateMainCircle( ctx.mainCircle );
    });
    }, fn.DELAY_START);
    }, fn.DELAY_START );
    }
    },
    'integratedServices': {
    @@ -71,11 +71,11 @@ var Fn = function() {
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    window.setTimeout( function() {
    fn.bounceIn(ctx.icons, function() {
    fn.rotateMainCircle( ctx.mainCircle );
    });
    }, fn.DELAY_START);
    }, fn.DELAY_START );
    }
    },
    'monitorTrackServices': {
    @@ -98,9 +98,9 @@ var Fn = function() {
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    window.setTimeout( function() {
    fn.animateTracks( ctx.icons );
    }, fn.DELAY_START);
    }, fn.DELAY_START );
    }
    }
    };
    @@ -158,7 +158,7 @@ Fn.prototype.getAllIcons = function(svg, order) {

    Fn.prototype.getAllBooks = function( svg ) {
    var bookRange = _.range( 4 );
    return _.map(bookRange, function( book, idx ) {
    return _.map( bookRange, function( book, idx ) {
    var path = svg.select( '#cis-book-' + ( idx + 1 ) );
    var bounds = path.getBBox();
    var width = bounds.width;
    @@ -168,7 +168,7 @@ Fn.prototype.getAllBooks = function( svg ) {
    var y = bounds.y;
    var cy = height + y;
    var queue = [];
    switch (idx) {
    switch ( idx ) {
    case 0:
    queue.push( `rotate(90, ${cx}, ${cy})` );
    break;
    @@ -184,22 +184,22 @@ Fn.prototype.getAllBooks = function( svg ) {
    svgPath: path,
    animations: queue
    };
    });
    } );
    };

    Fn.prototype.rotateMainCircle = function( circle ) {
    var fn = this;
    var cx = circle.attr( 'cx' );
    var cy = circle.attr( 'cy' );
    var r = circle.attr( 'r' );
    circle.animate({
    circle.animate( {
    transform: `rotate(360, ${cx}, ${cy})`
    }, fn.CIRCLE_ROTATION_DURATION, function() {
    circle.attr({
    circle.attr( {
    transform: `rotate(0, ${cx}, ${cy})`
    });
    } );
    fn.rotateMainCircle( circle );
    });
    } );
    };

    Fn.prototype.toppleBooks = function( books, done ) {
    @@ -208,21 +208,21 @@ Fn.prototype.toppleBooks = function( books, done ) {
    if ( books.length > 0 ) {
    var book = books.shift();
    if ( book.animations.length > 1 ) {
    book.svgPath.animate({
    book.svgPath.animate( {
    transform: book.animations[ 0 ]
    }, halfTime, function() {
    book.svgPath.animate({
    book.svgPath.animate( {
    transform: book.animations[ 1 ]
    }, halfTime, function() {
    fn.toppleBooks(books, done);
    });
    });
    } );
    } );
    } else {
    book.svgPath.animate({
    book.svgPath.animate( {
    transform: book.animations[ 0 ]
    }, fn.ANIMATION_DURATION, function() {
    fn.toppleBooks( books, done );
    });
    } );
    }
    } else {
    if ( $.isFunction( done ) ) {
  8. rogeruiz revised this gist May 13, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -328,7 +328,7 @@ var Engine = function( name ) {
    };

    Engine.prototype.triggerAnimation = function() {
    if (this.animated) {
    if ( this.animated ) {
    return;
    }

  9. rogeruiz revised this gist May 13, 2015. 1 changed file with 6 additions and 5 deletions.
    11 changes: 6 additions & 5 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -137,15 +137,15 @@ Fn.prototype.getCoordinator = function( svg ) {
    };

    Fn.prototype.getAllIcons = function(svg, order) {
    if (order === 'circle') {
    if ( 'circle' === order ) {
    return [
    this.getCapIcon( svg ),
    this.getPlateIcon( svg ),
    this.getBooksIcon( svg ),
    this.getFamilyIcon( svg ),
    this.getHandsIcon( svg )
    ];
    } else if (order === 'track') {
    } else if ( 'track' === order ) {
    return [
    this.getPlateIcon( svg ),
    this.getBooksIcon( svg ),
    @@ -210,10 +210,10 @@ Fn.prototype.toppleBooks = function( books, done ) {
    if ( book.animations.length > 1 ) {
    book.svgPath.animate({
    transform: book.animations[ 0 ]
    }, ( halfTime ), function() {
    }, halfTime, function() {
    book.svgPath.animate({
    transform: book.animations[ 1 ]
    }, ( halfTime ), function() {
    }, halfTime, function() {
    fn.toppleBooks(books, done);
    });
    });
    @@ -272,6 +272,7 @@ Fn.prototype.fadeIn = function( items, done ) {

    Fn.prototype.bounceIn = function( items, done ) {
    var fn = this;
    var quarterTime = fn.ANIMATION_DURATION * 0.25;
    if ( items.length > 0 ) {
    var item = items.shift();
    var scaleFactor = 1.25;
    @@ -281,7 +282,7 @@ Fn.prototype.bounceIn = function( items, done ) {
    item.animate({
    transform: `translate(${-x}, ${-y}) scale(${scaleFactor})`,
    opacity: 0.85
    }, (fn.ANIMATION_DURATION * 0.25), function() {
    }, quarterTime, function() {
    item.animate({
    transform: 'scale(1)',
    opacity: 1
  10. rogeruiz revised this gist May 13, 2015. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -108,31 +108,31 @@ var Fn = function() {
    return this;
    };

    Fn.prototype.getMainCircle = function(svg) {
    Fn.prototype.getMainCircle = function( svg ) {
    return svg.select( '#cis-circle-main' );
    };

    Fn.prototype.getCapIcon = function(svg) {
    Fn.prototype.getCapIcon = function( svg ) {
    return svg.select( '#cis-cap' );
    };

    Fn.prototype.getFamilyIcon = function(svg) {
    Fn.prototype.getFamilyIcon = function( svg ) {
    return svg.select( '#cis-family' );
    };

    Fn.prototype.getPlateIcon = function(svg) {
    Fn.prototype.getPlateIcon = function( svg ) {
    return svg.select( '#cis-plate' );
    };

    Fn.prototype.getBooksIcon = function(svg) {
    Fn.prototype.getBooksIcon = function( svg ) {
    return svg.select( '#cis-books' );
    };

    Fn.prototype.getHandsIcon = function(svg) {
    Fn.prototype.getHandsIcon = function( svg ) {
    return svg.select( '#cis-hands' );
    };

    Fn.prototype.getCoordinator = function(svg) {
    Fn.prototype.getCoordinator = function( svg ) {
    return svg.select( '#cis-coordinator' );
    };

  11. rogeruiz revised this gist May 13, 2015. 1 changed file with 8 additions and 8 deletions.
    16 changes: 8 additions & 8 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,28 +19,28 @@ var Fn = function() {
    },
    animate: function() {
    var ctx = this;
    window.setTimeout( function() {
    window.setTimeout(function() {
    fn.toppleBooks( ctx.books );
    }, fn.DELAY_START );
    }, fn.DELAY_START);
    }
    },
    'siteCoordinator': {
    init: function() {
    var svg = this.getSvg();
    this.coordinator = fn.getCoordinator( svg );
    this.coordinator.attr( {
    this.coordinator.attr({
    transform: 'translate(50, 0)',
    opacity: 0
    } );
    });
    },
    animate: function() {
    var ctx = this;
    window.setTimeout( function() {
    ctx.coordinator.animate( {
    window.setTimeout(function() {
    ctx.coordinator.animate({
    transform: 'translate(0, 0)',
    opacity: 1
    }, fn.ANIMATION_DURATION );
    }, fn.DELAY_START );
    }, fn.ANIMATION_DURATION);
    }, fn.DELAY_START);
    }
    },
    'collaborativeEffort': {
  12. rogeruiz revised this gist May 13, 2015. 1 changed file with 42 additions and 41 deletions.
    83 changes: 42 additions & 41 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -187,55 +187,56 @@ Fn.prototype.getAllBooks = function( svg ) {
    });
    };

    Fn.prototype.rotateMainCircle = function(circle) {
    Fn.prototype.rotateMainCircle = function( circle ) {
    var fn = this;
    var cx = circle.attr('cx');
    var cy = circle.attr('cy');
    var r = circle.attr('r');
    var cx = circle.attr( 'cx' );
    var cy = circle.attr( 'cy' );
    var r = circle.attr( 'r' );
    circle.animate({
    transform: 'rotate(360, ' + cx + ', ' + cy + ')'
    transform: `rotate(360, ${cx}, ${cy})`
    }, fn.CIRCLE_ROTATION_DURATION, function() {
    circle.attr({
    transform: 'rotate(0, ' + cx + ', ' + cy + ')'
    transform: `rotate(0, ${cx}, ${cy})`
    });
    fn.rotateMainCircle(circle);
    fn.rotateMainCircle( circle );
    });
    };

    Fn.prototype.toppleBooks = function(books, done) {
    Fn.prototype.toppleBooks = function( books, done ) {
    var fn = this;
    if (books.length > 0) {
    var halfTime = fn.ANIMATION_DURATION * 0.5;
    if ( books.length > 0 ) {
    var book = books.shift();
    if (book.animations.length > 1) {
    if ( book.animations.length > 1 ) {
    book.svgPath.animate({
    transform: book.animations[0]
    }, (fn.ANIMATION_DURATION * 0.5), function() {
    transform: book.animations[ 0 ]
    }, ( halfTime ), function() {
    book.svgPath.animate({
    transform: book.animations[1]
    }, (fn.ANIMATION_DURATION * 0.5), function() {
    transform: book.animations[ 1 ]
    }, ( halfTime ), function() {
    fn.toppleBooks(books, done);
    });
    });
    } else {
    book.svgPath.animate({
    transform: book.animations[0]
    transform: book.animations[ 0 ]
    }, fn.ANIMATION_DURATION, function() {
    fn.toppleBooks(books, done);
    fn.toppleBooks( books, done );
    });
    }
    } else {
    if ($.isFunction(done)) {
    if ( $.isFunction( done ) ) {
    done();
    }
    }
    };

    Fn.prototype.animateTracks = function(icons, done) {
    Fn.prototype.animateTracks = function( icons, done ) {
    var fn = this;
    if (icons.length > 0) {
    if ( icons.length > 0 ) {
    var icon = icons.shift();
    var cover = icon.select('#cis-circle-cover');
    var mark = icon.select('#cis-check-mark');
    var cover = icon.select( '#cis-circle-cover' );
    var mark = icon.select( '#cis-check-mark' );
    cover.animate({
    opacity: 0.8
    }, fn.ANIMATION_DURATION, function() {
    @@ -247,76 +248,76 @@ Fn.prototype.animateTracks = function(icons, done) {
    });
    });
    } else {
    if ($.isFunction(done)) {
    if ( $.isFunction( done ) ) {
    done();
    }
    }
    };

    Fn.prototype.fadeIn = function(items, done) {
    Fn.prototype.fadeIn = function( items, done ) {
    var fn = this;
    if (items.length > 0) {
    if ( items.length > 0 ) {
    var item = items.shift();
    item.animate({
    opacity: 1
    }, fn.ANIMATION_DURATION, function() {
    fn.fadeIn(items, done);
    fn.fadeIn( items, done );
    });
    } else {
    if ($.isFunction(done)) {
    if ( $.isFunction( done ) ) {
    done();
    }
    }
    };

    Fn.prototype.bounceIn = function(items, done) {
    Fn.prototype.bounceIn = function( items, done ) {
    var fn = this;
    if (items.length > 0) {
    if ( items.length > 0 ) {
    var item = items.shift();
    var scaleFactor = 1.25;
    var x = item.select('circle').attr('cx') * (scaleFactor - 1);
    var y = item.select('circle').attr('cy') * (scaleFactor - 1);
    var x = item.select( 'circle' ).attr( 'cx' ) * ( scaleFactor - 1 );
    var y = item.select( 'circle' ).attr( 'cy' ) * ( scaleFactor - 1 );

    item.animate({
    transform: 'translate(-' + x + ',-' + y + ') scale(' + scaleFactor + ')',
    transform: `translate(${-x}, ${-y}) scale(${scaleFactor})`,
    opacity: 0.85
    }, (fn.ANIMATION_DURATION * 0.25), function() {
    item.animate({
    transform: 'scale(1)',
    opacity: 1
    }, fn.ANIMATION_DURATION, mina.bounce, function() {
    fn.bounceIn(items, done);
    fn.bounceIn( items, done );
    });
    });
    } else {
    if ($.isFunction(done)) {
    if ( $.isFunction( done ) ) {
    done();
    }
    }
    };

    var Engine = function(name) {
    var Engine = function( name ) {
    var component = this;
    this.fn = new Fn();

    this.animated = false;
    this.name = name;
    this.ctx = this.fn.ctx[name];
    this.ctx = this.fn.ctx[ name ];

    this.ctx.getContainer = function() {
    return $('.js-' + help.dasherize(name));
    return $( '.js-' + help.dasherize( name ) );
    };

    this.ctx.getSvg = function() {
    return Snap('#cis-' + help.dasherize(name));
    return Snap( '#cis-' + help.dasherize( name ) );
    };

    this.ctx.getParentContainer = function() {
    return this.getContainer().parents(component.fn.el.container);
    return this.getContainer().parents( component.fn.el.container );
    };

    this.ctx.getThreshold = function() {
    return this.getParentContainer().offset().top - (this.getContainer().height() * 0.5);
    return this.getParentContainer().offset().top - ( this.getContainer().height() * 0.5 );
    };

    this.ctx.init();
    @@ -330,7 +331,7 @@ Engine.prototype.triggerAnimation = function() {
    return;
    }

    if ($(window).scrollTop() >= this.ctx.getThreshold()) {
    if ( $(window).scrollTop() >= this.ctx.getThreshold() ) {
    this.ctx.animate();
    this.animated = true;
    }
    @@ -339,7 +340,7 @@ Engine.prototype.triggerAnimation = function() {

    Engine.prototype.recalculateSize = function() {
    var $container = this.ctx.getContainer();
    $container.find('svg').css({
    $container.find( 'svg' ).css({
    width: $container.width(),
    height: $container.width()
    });
  13. rogeruiz revised this gist May 13, 2015. 1 changed file with 48 additions and 48 deletions.
    96 changes: 48 additions & 48 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,40 +15,40 @@ var Fn = function() {
    'studentDropout': {
    init: function() {
    var svg = this.getSvg();
    this.books = fn.getAllBooks(svg);
    this.books = fn.getAllBooks( svg );
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.toppleBooks(ctx.books);
    }, fn.DELAY_START);
    window.setTimeout( function() {
    fn.toppleBooks( ctx.books );
    }, fn.DELAY_START );
    }
    },
    'siteCoordinator': {
    init: function() {
    var svg = this.getSvg();
    this.coordinator = fn.getCoordinator(svg);
    this.coordinator.attr({
    this.coordinator = fn.getCoordinator( svg );
    this.coordinator.attr( {
    transform: 'translate(50, 0)',
    opacity: 0
    });
    } );
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    ctx.coordinator.animate({
    window.setTimeout( function() {
    ctx.coordinator.animate( {
    transform: 'translate(0, 0)',
    opacity: 1
    }, fn.ANIMATION_DURATION);
    }, fn.DELAY_START);
    }, fn.ANIMATION_DURATION );
    }, fn.DELAY_START );
    }
    },
    'collaborativeEffort': {
    init: function() {
    var svg = this.getSvg();
    this.mainCircle = fn.getMainCircle(svg);
    this.icons = fn.getAllIcons(svg, 'circle');
    _.forEach(this.icons, function(icon) {
    this.mainCircle = fn.getMainCircle( svg );
    this.icons = fn.getAllIcons( svg, 'circle' );
    _.forEach(this.icons, function( icon ) {
    icon.attr({
    opacity: 0.15
    });
    @@ -58,33 +58,33 @@ var Fn = function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.fadeIn(ctx.icons, function() {
    fn.rotateMainCircle(ctx.mainCircle);
    fn.rotateMainCircle( ctx.mainCircle );
    });
    }, fn.DELAY_START);
    }
    },
    'integratedServices': {
    init: function() {
    var svg = this.getSvg();
    this.mainCircle = fn.getMainCircle(svg);
    this.icons = fn.getAllIcons(svg, 'circle');
    this.mainCircle = fn.getMainCircle( svg );
    this.icons = fn.getAllIcons( svg, 'circle' );
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.bounceIn(ctx.icons, function() {
    fn.rotateMainCircle(ctx.mainCircle);
    fn.rotateMainCircle( ctx.mainCircle );
    });
    }, fn.DELAY_START);
    }
    },
    'monitorTrackServices': {
    init: function() {
    var svg = this.getSvg();
    this.icons = fn.getAllIcons(svg, 'track');
    _.forEach(this.icons, function(icon) {
    var cover = icon.select('#cis-circle-cover');
    var mark = icon.select('#cis-check-mark');
    this.icons = fn.getAllIcons( svg, 'track' );
    _.forEach(this.icons, function( icon ) {
    var cover = icon.select( '#cis-circle-cover' );
    var mark = icon.select( '#cis-check-mark' );
    cover.attr({
    opacity: 0
    });
    @@ -99,7 +99,7 @@ var Fn = function() {
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.animateTracks(ctx.icons);
    fn.animateTracks( ctx.icons );
    }, fn.DELAY_START);
    }
    }
    @@ -109,57 +109,57 @@ var Fn = function() {
    };

    Fn.prototype.getMainCircle = function(svg) {
    return svg.select('#cis-circle-main');
    return svg.select( '#cis-circle-main' );
    };

    Fn.prototype.getCapIcon = function(svg) {
    return svg.select('#cis-cap');
    return svg.select( '#cis-cap' );
    };

    Fn.prototype.getFamilyIcon = function(svg) {
    return svg.select('#cis-family');
    return svg.select( '#cis-family' );
    };

    Fn.prototype.getPlateIcon = function(svg) {
    return svg.select('#cis-plate');
    return svg.select( '#cis-plate' );
    };

    Fn.prototype.getBooksIcon = function(svg) {
    return svg.select('#cis-books');
    return svg.select( '#cis-books' );
    };

    Fn.prototype.getHandsIcon = function(svg) {
    return svg.select('#cis-hands');
    return svg.select( '#cis-hands' );
    };

    Fn.prototype.getCoordinator = function(svg) {
    return svg.select('#cis-coordinator');
    return svg.select( '#cis-coordinator' );
    };

    Fn.prototype.getAllIcons = function(svg, order) {
    if (order === 'circle') {
    return [
    this.getCapIcon(svg),
    this.getPlateIcon(svg),
    this.getBooksIcon(svg),
    this.getFamilyIcon(svg),
    this.getHandsIcon(svg)
    this.getCapIcon( svg ),
    this.getPlateIcon( svg ),
    this.getBooksIcon( svg ),
    this.getFamilyIcon( svg ),
    this.getHandsIcon( svg )
    ];
    } else if (order === 'track') {
    return [
    this.getPlateIcon(svg),
    this.getBooksIcon(svg),
    this.getFamilyIcon(svg),
    this.getHandsIcon(svg),
    this.getCapIcon(svg)
    this.getPlateIcon( svg ),
    this.getBooksIcon( svg ),
    this.getFamilyIcon( svg ),
    this.getHandsIcon( svg ),
    this.getCapIcon( svg )
    ];
    }
    };

    Fn.prototype.getAllBooks = function(svg) {
    var bookRange = _.range(4);
    return _.map(bookRange, function(book, idx) {
    var path = svg.select('#cis-book-' + (idx + 1));
    Fn.prototype.getAllBooks = function( svg ) {
    var bookRange = _.range( 4 );
    return _.map(bookRange, function( book, idx ) {
    var path = svg.select( '#cis-book-' + ( idx + 1 ) );
    var bounds = path.getBBox();
    var width = bounds.width;
    var x = bounds.x;
    @@ -170,14 +170,14 @@ Fn.prototype.getAllBooks = function(svg) {
    var queue = [];
    switch (idx) {
    case 0:
    queue.push('rotate(90, ' + cx + ', ' + cy + ')');
    queue.push( `rotate(90, ${cx}, ${cy})` );
    break;
    case 1:
    queue.push('rotate(45, ' + cx + ', ' + cy + ')');
    queue.push('rotate(90, ' + cx + ', ' + cy + ') translate(' + -(width) + ', 0)');
    queue.push( `rotate(45, ${cx}, ${cy})` );
    queue.push( `rotate(90, ${cx}, ${cy}), translate(${-width}, 0)` );
    break;
    default:
    queue.push('rotate(35, ' + cx + ', ' + cy + ')');
    queue.push( `rotate(35, ${cx}, ${cy})` );
    }

    return {
  14. rogeruiz created this gist Apr 22, 2015.
    348 changes: 348 additions & 0 deletions animationEngine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,348 @@
    import { $, RSVP, _, Snap, mina, help } from 'util';

    var Fn = function() {
    var fn = this;

    this.DELAY_START = 250;
    this.ANIMATION_DURATION = 550;
    this.CIRCLE_ROTATION_DURATION = 50000;

    this.el = {
    container: '.js-hww-container'
    };

    this.ctx = {
    'studentDropout': {
    init: function() {
    var svg = this.getSvg();
    this.books = fn.getAllBooks(svg);
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.toppleBooks(ctx.books);
    }, fn.DELAY_START);
    }
    },
    'siteCoordinator': {
    init: function() {
    var svg = this.getSvg();
    this.coordinator = fn.getCoordinator(svg);
    this.coordinator.attr({
    transform: 'translate(50, 0)',
    opacity: 0
    });
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    ctx.coordinator.animate({
    transform: 'translate(0, 0)',
    opacity: 1
    }, fn.ANIMATION_DURATION);
    }, fn.DELAY_START);
    }
    },
    'collaborativeEffort': {
    init: function() {
    var svg = this.getSvg();
    this.mainCircle = fn.getMainCircle(svg);
    this.icons = fn.getAllIcons(svg, 'circle');
    _.forEach(this.icons, function(icon) {
    icon.attr({
    opacity: 0.15
    });
    });
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.fadeIn(ctx.icons, function() {
    fn.rotateMainCircle(ctx.mainCircle);
    });
    }, fn.DELAY_START);
    }
    },
    'integratedServices': {
    init: function() {
    var svg = this.getSvg();
    this.mainCircle = fn.getMainCircle(svg);
    this.icons = fn.getAllIcons(svg, 'circle');
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.bounceIn(ctx.icons, function() {
    fn.rotateMainCircle(ctx.mainCircle);
    });
    }, fn.DELAY_START);
    }
    },
    'monitorTrackServices': {
    init: function() {
    var svg = this.getSvg();
    this.icons = fn.getAllIcons(svg, 'track');
    _.forEach(this.icons, function(icon) {
    var cover = icon.select('#cis-circle-cover');
    var mark = icon.select('#cis-check-mark');
    cover.attr({
    opacity: 0
    });
    var len = mark.getTotalLength();
    mark.attr({
    'stroke-dasharray': len + ' ' + len,
    'stroke-dashoffset': len,
    opacity: 0
    });
    });
    },
    animate: function() {
    var ctx = this;
    window.setTimeout(function() {
    fn.animateTracks(ctx.icons);
    }, fn.DELAY_START);
    }
    }
    };

    return this;
    };

    Fn.prototype.getMainCircle = function(svg) {
    return svg.select('#cis-circle-main');
    };

    Fn.prototype.getCapIcon = function(svg) {
    return svg.select('#cis-cap');
    };

    Fn.prototype.getFamilyIcon = function(svg) {
    return svg.select('#cis-family');
    };

    Fn.prototype.getPlateIcon = function(svg) {
    return svg.select('#cis-plate');
    };

    Fn.prototype.getBooksIcon = function(svg) {
    return svg.select('#cis-books');
    };

    Fn.prototype.getHandsIcon = function(svg) {
    return svg.select('#cis-hands');
    };

    Fn.prototype.getCoordinator = function(svg) {
    return svg.select('#cis-coordinator');
    };

    Fn.prototype.getAllIcons = function(svg, order) {
    if (order === 'circle') {
    return [
    this.getCapIcon(svg),
    this.getPlateIcon(svg),
    this.getBooksIcon(svg),
    this.getFamilyIcon(svg),
    this.getHandsIcon(svg)
    ];
    } else if (order === 'track') {
    return [
    this.getPlateIcon(svg),
    this.getBooksIcon(svg),
    this.getFamilyIcon(svg),
    this.getHandsIcon(svg),
    this.getCapIcon(svg)
    ];
    }
    };

    Fn.prototype.getAllBooks = function(svg) {
    var bookRange = _.range(4);
    return _.map(bookRange, function(book, idx) {
    var path = svg.select('#cis-book-' + (idx + 1));
    var bounds = path.getBBox();
    var width = bounds.width;
    var x = bounds.x;
    var cx = width + x;
    var height = bounds.height;
    var y = bounds.y;
    var cy = height + y;
    var queue = [];
    switch (idx) {
    case 0:
    queue.push('rotate(90, ' + cx + ', ' + cy + ')');
    break;
    case 1:
    queue.push('rotate(45, ' + cx + ', ' + cy + ')');
    queue.push('rotate(90, ' + cx + ', ' + cy + ') translate(' + -(width) + ', 0)');
    break;
    default:
    queue.push('rotate(35, ' + cx + ', ' + cy + ')');
    }

    return {
    svgPath: path,
    animations: queue
    };
    });
    };

    Fn.prototype.rotateMainCircle = function(circle) {
    var fn = this;
    var cx = circle.attr('cx');
    var cy = circle.attr('cy');
    var r = circle.attr('r');
    circle.animate({
    transform: 'rotate(360, ' + cx + ', ' + cy + ')'
    }, fn.CIRCLE_ROTATION_DURATION, function() {
    circle.attr({
    transform: 'rotate(0, ' + cx + ', ' + cy + ')'
    });
    fn.rotateMainCircle(circle);
    });
    };

    Fn.prototype.toppleBooks = function(books, done) {
    var fn = this;
    if (books.length > 0) {
    var book = books.shift();
    if (book.animations.length > 1) {
    book.svgPath.animate({
    transform: book.animations[0]
    }, (fn.ANIMATION_DURATION * 0.5), function() {
    book.svgPath.animate({
    transform: book.animations[1]
    }, (fn.ANIMATION_DURATION * 0.5), function() {
    fn.toppleBooks(books, done);
    });
    });
    } else {
    book.svgPath.animate({
    transform: book.animations[0]
    }, fn.ANIMATION_DURATION, function() {
    fn.toppleBooks(books, done);
    });
    }
    } else {
    if ($.isFunction(done)) {
    done();
    }
    }
    };

    Fn.prototype.animateTracks = function(icons, done) {
    var fn = this;
    if (icons.length > 0) {
    var icon = icons.shift();
    var cover = icon.select('#cis-circle-cover');
    var mark = icon.select('#cis-check-mark');
    cover.animate({
    opacity: 0.8
    }, fn.ANIMATION_DURATION, function() {
    mark.animate({
    opacity: 1,
    'stroke-dashoffset': 10
    }, fn.ANIMATION_DURATION, function() {
    fn.animateTracks(icons, done);
    });
    });
    } else {
    if ($.isFunction(done)) {
    done();
    }
    }
    };

    Fn.prototype.fadeIn = function(items, done) {
    var fn = this;
    if (items.length > 0) {
    var item = items.shift();
    item.animate({
    opacity: 1
    }, fn.ANIMATION_DURATION, function() {
    fn.fadeIn(items, done);
    });
    } else {
    if ($.isFunction(done)) {
    done();
    }
    }
    };

    Fn.prototype.bounceIn = function(items, done) {
    var fn = this;
    if (items.length > 0) {
    var item = items.shift();
    var scaleFactor = 1.25;
    var x = item.select('circle').attr('cx') * (scaleFactor - 1);
    var y = item.select('circle').attr('cy') * (scaleFactor - 1);

    item.animate({
    transform: 'translate(-' + x + ',-' + y + ') scale(' + scaleFactor + ')',
    opacity: 0.85
    }, (fn.ANIMATION_DURATION * 0.25), function() {
    item.animate({
    transform: 'scale(1)',
    opacity: 1
    }, fn.ANIMATION_DURATION, mina.bounce, function() {
    fn.bounceIn(items, done);
    });
    });
    } else {
    if ($.isFunction(done)) {
    done();
    }
    }
    };

    var Engine = function(name) {
    var component = this;
    this.fn = new Fn();

    this.animated = false;
    this.name = name;
    this.ctx = this.fn.ctx[name];

    this.ctx.getContainer = function() {
    return $('.js-' + help.dasherize(name));
    };

    this.ctx.getSvg = function() {
    return Snap('#cis-' + help.dasherize(name));
    };

    this.ctx.getParentContainer = function() {
    return this.getContainer().parents(component.fn.el.container);
    };

    this.ctx.getThreshold = function() {
    return this.getParentContainer().offset().top - (this.getContainer().height() * 0.5);
    };

    this.ctx.init();
    this.recalculateSize();

    return this;
    };

    Engine.prototype.triggerAnimation = function() {
    if (this.animated) {
    return;
    }

    if ($(window).scrollTop() >= this.ctx.getThreshold()) {
    this.ctx.animate();
    this.animated = true;
    }

    };

    Engine.prototype.recalculateSize = function() {
    var $container = this.ctx.getContainer();
    $container.find('svg').css({
    width: $container.width(),
    height: $container.width()
    });
    };

    export default Engine;