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
Animation Engine used on How We Work for CISofRichmond
Raw
animationEngine.js
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment