Skip to content

Instantly share code, notes, and snippets.

@wbamberg
Created May 3, 2016 15:52
Show Gist options
  • Save wbamberg/1621985709b924c3d126fceaa3d22c57 to your computer and use it in GitHub Desktop.
Save wbamberg/1621985709b924c3d126fceaa3d22c57 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#container {
margin: 0.5em;
padding: 0.5em;
box-shadow: 1px 1px 5px #808080;
}
.channel {
margin: 1em 1em;
}
.channel > * {
vertical-align: middle;
line-height: normal;
}
.channel-icon {
width: 50px;
height: 50px;
filter: grayscale(100%);
}
.channel-note {
margin-left: 1em;
font: 1.5em "Open Sans",Arial,sans-serif;
overflow: hidden;
white-space: nowrap;
display: inline-block;
opacity: 0;
width: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="channel">
<img src="https://mdn.mozillademos.org/files/11827/developer.png" id="developer-edition-icon" class="channel-icon"/>
<span class="channel-note" id="developer-edition-note">Firefox Developer Edition</span>
</div>
</div>
<script type="text/javascript">
var selectingIconKeyframes = [
{ transform: 'scale(1)', filter: 'grayscale(100%)'},
{ filter: 'grayscale(100%)', offset: 0.333},
{ transform: 'scale(1.5)', offset: 0.666 },
{ transform: 'scale(1.5)', filter: 'grayscale(0%)'}
];
var selectingNoteKeyframes = [
{ opacity: '0', width: '0'},
{ opacity: '1', width: '300px'}
];
var iconAnimationOptions = {
duration: 750,
fill: 'forwards',
easing: 'ease-in',
delay: 150,
endDelay: 100
}
var noteAnimationOptions = {
duration: 500,
fill: 'forwards',
easing: 'ease-in'
}
var animations;
function initializeAnimations() {
var icon = document.getElementById("developer-edition-icon");
var note = document.getElementById("developer-edition-note");
animations = {};
animations.iconAnimation = icon.animate(selectingIconKeyframes, iconAnimationOptions);
animations.iconAnimation.finished.then(()=>{animations.noteAnimation = note.animate(selectingNoteKeyframes, noteAnimationOptions)});
return animations;
}
document.addEventListener("click", animateChannel);
function animateChannel(e) {
if (!e.target.classList.contains("channel-icon")) {
return;
}
if (!animations) {
animations = initializeAnimations();
} else {
animations.iconAnimation.reverse();
animations.iconAnimation.finished.then(()=>{animations.noteAnimation.reverse()});
;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment