Anim-x Examples

let element = document.querySelector("#example-1 .square")
await animateElement(element, "pulse")
        
#example-1 .animate-pule-active {
    transition: ease-out 0.3s transform;
}

#example-1 .animate-pule {
    transform: scale(0.5)
}

#example-1 .animate-pule-end {
    transform: scale(1)
}
        
let element = document.querySelector("#example-1 .square")
await animateElement(element, "slide-right")
await animateElement(element, "slide-left")
        
#example-2 .square {
    position: relative;
    top: 0;
    left: 0;
}

#example-2 .animate-slide-right, #example-2 .animate-slide-left {
    transition: ease 0.3s left;
}

#example-2 .animate-slide-right, #example-2 .animate-slide-left-end {
    left: -200%;
}

#example-2 .animate-slide-right-end, #example-2 .animate-slide-left {
    left: 200%;
}
        
let elements = Array.from(document.querySelectorAll("#example-3 .card"))
elements.forEach(el => el.classList.remove("hidden"))
await animateStack("enter", elements)
await new Promise(res => setTimeout(res, 2000))
await animateStack("leave", elements)
elements.forEach(el => el.classList.add("hidden"))
await new Promise(res => setTimeout(res, 500))
        
#example-3 .animate-enter-active, #example-3 .animate-leave-active {
    transition: ease-out 0.5s all;
}

#example-3 .animate-enter-step,
#example-3 .animate-leave-step {
    transition-delay: 100ms;
}

#example-3 .animate-enter-step:last-child {
    transition-delay: 150ms;
}

#example-3 .animate-enter {
    transform: translateY(50px);
    opacity: 0;
}

#example-3 .animate-leave-end {
    opacity: 0;
}

#example-3 .hidden {
    opacity: 0;
}
        
Anim-x Examples

Anim-x Examples

let element = document.querySelector("#example-1 .square")
await animateElement(element, "pulse")
        
#example-1 .animate-pule-active {
    transition: ease-out 0.3s transform;
}

#example-1 .animate-pule {
    transform: scale(0.5)
}

#example-1 .animate-pule-end {
    transform: scale(1)
}
        
let element = document.querySelector("#example-1 .square")
await animateElement(element, "slide-right")
await animateElement(element, "slide-left")
        
#example-2 .square {
    position: relative;
    top: 0;
    left: 0;
}

#example-2 .animate-slide-right, #example-2 .animate-slide-left {
    transition: ease 0.3s left;
}

#example-2 .animate-slide-right, #example-2 .animate-slide-left-end {
    left: -200%;
}

#example-2 .animate-slide-right-end, #example-2 .animate-slide-left {
    left: 200%;
}
        
let elements = Array.from(document.querySelectorAll("#example-3 .card"))
elements.forEach(el => el.classList.remove("hidden"))
await animateStack("enter", elements)
await new Promise(res => setTimeout(res, 2000))
await animateStack("leave", elements)
elements.forEach(el => el.classList.add("hidden"))
await new Promise(res => setTimeout(res, 500))
        
#example-3 .animate-enter-active, #example-3 .animate-leave-active {
    transition: ease-out 0.5s all;
}

#example-3 .animate-enter-step,
#example-3 .animate-leave-step {
    transition-delay: 100ms;
}

#example-3 .animate-enter-step:last-child {
    transition-delay: 150ms;
}

#example-3 .animate-enter {
    transform: translateY(50px);
    opacity: 0;
}

#example-3 .animate-leave-end {
    opacity: 0;
}

#example-3 .hidden {
    opacity: 0;
}