Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animate any UI component in a fancy way
function getFamilyTree(el) {
const levels = new Map();
function bfs(el, level) {
const levelElements = levels.get(level) || [];
for (const child of el.children) {
child.style.opacity = '0';
levelElements.push(child);
}
levels.set(level, levelElements);
for (const child of el.children) {
bfs(child, level + 1);
}
}
bfs(el, 0);
return levels;
}
function buildElement(el) {
const tree = getFamilyTree(el);
let lastPlayer = null;
for (var i = 0; i < tree.size; i++) {
const level = tree.get(i);
for (const child of level) {
const style = getComputedStyle(child);
if (child.tagName == 'DIV' &&
style.backgroundColor === 'rgba(0, 0, 0, 0)') {
child.style.outline = 'solid white 25px';
child.style.outlineOffset = '-25px';
}
// if (style.display == 'inline') {
// child.style.display = 'inline-block';
// }
const startFrame = {
opacity: 0,
//transform: 'translate3d(0,0,100px)',
color: 'white',
outlineColor: 'rgba(255,255,255,1)'
};
const middleFrame = {
opacity: 1,
color: 'white',
outlineColor: 'rgba(255,255,255,0)',
offset: 0.8
};
const endFrame = {
opacity: 1,
//transform: 'translate3d(0,0,0)',
color: style.color,
outlineColor: 'rgba(255,255,255,0)',
};
if (style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
startFrame.backgroundColor = 'white';
endFrame.backgroundColor = style.backgroundColor;
}
if (style.fill !== 'rgb(0, 0, 0)') {
startFrame.fill = 'white';
endFrame.fill = style.fill;
}
var player = child.animate([startFrame, middleFrame, endFrame], {
duration: 300,
delay: i * 300,
easing: 'ease-in'
});
player.addEventListener('finish', () => {
child.style.opacity = '1';
child.style.outline = 'none';
});
lastPlayer = player;
}
}
if (lastPlayer) {
lastPlayer.addEventListener('finish', () => {
//run additional animations
});
}
}
buildElement(document.querySelector('some-root-element'));
@kdzwinel

This comment has been minimized.

Copy link
Owner Author

kdzwinel commented Apr 15, 2016

Variant 1 - playing with outlines:
variant1

Variant 2 - playing with transforms:
variant2

To run this one:

  • replace outline & color related code with transition code (commented out in the file above)
  • set a perspective on root element (e.g. perspective: 200px)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.