Woed Classified Bar Animation

HOLD THY HORSES

This is a template page used internally by the Topiary.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
UwU

---

This is a component that animates the Classified Bar upon loading.

How to use:

Put this in anywhere in the article:

[[include :topia:component:woed-classified-animation]]

And you're done!

---

Source Code:

.scale .item1 .objclass {
    animation: nodegrow 1.85s cubic-bezier(.09,.5,.52,.92) 0.1s 1 backwards;
}
 
.scale div.class1image {
    animation: slide 0.55s cubic-bezier(.09,.74,.52,.99) 0.6s 1 backwards,
                      fadein 0.5s ease-out 0.6s 1 backwards;
}
 
.scale div.class1,
.scale .item1 .itemnum {
    animation: arrow-reveal 0.55s cubic-bezier(.09,.74,.52,.99) 0.61s 1 backwards;
                      fadein 0.5s cubic-bezier(.09,.74,.52,.99) 0.6s 1 backwards;
}
 
/*--------------*/
 
@keyframes nodegrow {
    0% { clip-path: circle(0% at 7.22% 50%); }
    23% { clip-path: circle(11% at 7.22% 50%); }
    29% { clip-path: circle(11% at 7.22% 50%); }
    97% {clip-path: circle(180% at 50% 50%); }
    100% {clip-path: circle(180% at 50% 50%); }
}
 
@keyframes slide {
    from { transform: translateX(-15rem); }
    to { transform: translateX(0); }
}
 
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes arrow-reveal {
    from { clip-path: inset(0 100% 0 -2rem round 1rem); }
    to { clip-path: inset(0 0% 0 -2rem round 1rem); }
}