Testing different reveal animation in elevator
This commit is contained in:
sairaj mote 2021-04-17 17:47:42 +05:30
parent 09c2015e1a
commit 13d2fff495
4 changed files with 5 additions and 12 deletions

View File

@ -413,16 +413,12 @@ ul {
gap: 2rem;
overflow-y: auto;
transform-origin: top;
counter-reset: floor-counter;
}
.floor_list__item {
display: grid;
gap: 1.5rem;
counter-increment: floor-counter;
}
.floor_list__item .floor-num::after {
content: " " counter(floor-counter);
transform-origin: top;
}
.floor_list__item:last-of-type {
padding-bottom: 25vh;

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -348,15 +348,11 @@ ul{
gap: 2rem;
overflow-y: auto;
transform-origin: top;
counter-reset: floor-counter;
}
.floor_list__item{
display: grid;
gap: 1.5rem;
counter-increment: floor-counter;
.floor-num::after{
content: " " counter(floor-counter);
}
transform-origin: top;
&:last-of-type{
padding-bottom: 25vh;
}

View File

@ -426,6 +426,7 @@ const render = {
const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
li.firstElementChild.dataset.target = `floor_${index + 1}`;
li.querySelector('.h3').textContent = floor
li.querySelector('.h5').textContent = `floor ${index + 1}`
const frag = document.createDocumentFragment()
outlets.forEach(outlet => frag.append(render.outletListItem(outlet)))
@ -678,7 +679,7 @@ const siteMapTimeline = gsap.timeline({
});
siteMapTimeline
.from("#elevator_popup", { duration: 0.3, opacity: 0 })
.from(".floor_list__item", { opacity: 0, x: -16, stagger: 0.1 });
.from(".floor_list__item", { opacity: 0, scaleY: 0.95, stagger: 0.1 });
function showSiteMap() {
document.querySelectorAll(".page").forEach((page) => {