Skip to content

Instantly share code, notes, and snippets.

@leemartin

leemartin/Scan.js

Created May 16, 2020
Embed
What would you like to do?
Basic Javascript hooks of Shelter In Space "Scanner" transition
methods: {
beforeEnter(el) {
el.style.cssText = "clip-path: inset(0 0 100% 0)"
},
enter(el, done) {
let scan = { percent: 100 }
anime({
targets: scan,
percent: 0,
duration: 2000,
easing: "linear",
update() {
el.style.cssText = `clip-path: inset(0 0 ${scan.percent}% 0)`
document.getElementById('scan').style.top = `${100 - scan.percent}%`
},
complete() {
done()
}
})
},
leave(el, done) {
let scan = { percent: 0 }
anime({
targets: scan,
percent: 100,
duration: 2000,
easing: "linear",
update() {
el.style.cssText = `clip-path: inset(${scan.percent}% 0 0 0)`
},
complete() {
done()
}
})
}
}
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.