Skip to content

Instantly share code, notes, and snippets.

@MoritzKn
Last active Feb 21, 2020
Embed
What would you like to do?
POC Smooth Element Expand Animation
function getElementsAfter(el, {stopAt, skip, only} = {}) {
let elements = [];
while (el) {
while (el.nextElementSibling) {
el = el.nextElementSibling
elements.push(el)
}
while (el && !el.nextElementSibling) {
el = el.parentElement
}
}
elements = elements.filter(el => {
if (skip) {
if (el.matches(skip)) {
return false
}
}
if (only) {
if (!el.matches(only)) {
return false
}
}
return true
});
if (stopAt) {
const indexLast = elements.findIndex(el => el.matches(stopAt))
if (indexLast != -1) {
elements = elements.slice(0, indexLast)
}
}
return elements;
}
function animateExpand(el, { from = 0, to = 200, duration = 320, stopAt, skip, only, indexLast } = {}) {
const elements = getElementsAfter(el, {stopAt, skip, only})
const start = Date.now();
function animate() {
let progress = (Date.now() - start) / duration;
if (progress >= 1) {
progress = 1
}
const offset = from + ((to - from) * progress)
elements.forEach(el => el.style.transform = `translateY(${offset}px)`)
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment