Skip to content

Instantly share code, notes, and snippets.

@claudia-romano
Last active August 17, 2018 10:23
Show Gist options
  • Save claudia-romano/2cd07c32ccb8fb3095d6252e7b48e2cb to your computer and use it in GitHub Desktop.
Save claudia-romano/2cd07c32ccb8fb3095d6252e7b48e2cb to your computer and use it in GitHub Desktop.
TransitionIcon.prototype.triggerAnimation = function(timestamp) {
var progress = this.getProgress(timestamp);
this.animateIcon(progress);
this.checkProgress(progress);
};
TransitionIcon.prototype.getProgress = function(timestamp) {
//make sure the progress value is in the right interval
if (!this.time.start) this.time.start = timestamp;
return timestamp - this.time.start;
};
TransitionIcon.prototype.checkProgress = function(progress) {
//check if animation is complete
var self = this;
if (this.time.total > progress) {
//animation is not over -> start new animation loop
window.requestAnimationFrame(self.triggerAnimation.bind(self));
} else {
//animation is over -> update object properties + group aria attributes
this.status = {interacted : !this.status.interacted, animating : false};
this.time.start= null;
var index = getStatusIndex(this.status.interacted);
this.states[index[0]].removeAttribute('aria-hidden');
this.states[index[1]].setAttribute('aria-hidden', 'true');
}
};
TransitionIcon.prototype.animateIcon = function(progress) {
if(progress > this.time.total) progress = this.time.total;
if(0 > progress) progress = 0;
var index = getStatusIndex(this.status.interacted);
//update group visibility
this.states[index[0]].style.display = (progress > this.time.total/2) ? "none" : "block";
this.states[index[1]].style.display = (progress > this.time.total/2) ? "block" : "none";
//scale group elements
this.scaleIcon(progress, index[0], index[1]);
}
TransitionIcon.prototype.scaleIcon = function(progress, i, j) {
var scale1 = ncEaseInOutQuart(Math.min(progress, this.time.total/2), 1, -0.2, this.time.total/2).toFixed(2),
scale2 = ncEaseInOutQuart(Math.max(progress - this.time.total/2, 0), 0.2, -0.2, this.time.total/2).toFixed(2);
this.states[i].setAttribute('transform', 'translate('+this.size.width*(1 - scale1)/2+' '+this.size.height*(1 - scale1)/2+') scale('+ scale1 +')');
this.states[j].setAttribute('transform', 'translate('+this.size.width*scale2/2+' '+this.size.height*scale2/2+') scale('+ (1 - scale2) +')');
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment