An-Reveal Family - Anole Demo

anole docs - an-reveal family

.an-reveal class family

Place your mouse over any ".an-reveal" to see its corresponding action. Anole reveal animations can be triggered by a simple hover (or tap on mobile), or you can trigger them programatically by adding the "active" class via Javascript (not yet implemented). Since these classes use transitions to produce their animations, you can easily adjust their timing by overriding the corresponding

"an-wipe-*"

"an-show-*"

classes with your own.
Simply include

transition: Xs

.an-wipe-* classes:

.an-reveal > .an-wipe-left

.an-wipe-left

.an-reveal > .an-wipe-right

.an-wipe-right

.an-reveal > .an-wipe-up

.an-wipe-up

.an-reveal > ...-wipe-down

.an-wipe-down

.an-show-* classes:

.an-reveal

.an-show-down

.an-reveal

.an-show-up

.an-reveal

.an-show-left

.an-reveal

.an-show-right

.an-spoiler-* classes:

.an-reveal > .an-spoiler-x

.an-spoiler-x

.an-reveal > .an-spoiler-xb

.an-spoiler-xb

.an-reveal > .an-spoiler-y

.an-spoiler-y

.an-reveal > .an-spoiler-yb

.an-spoiler-yb

.an-reveal > .an-spoiler-spinoutx

.an-spoiler-spinoutx

.an-reveal > .an-spoiler-spinouty

.an-spoiler-spinouty