Animations

Scroll to reveal Animations that are displayed when you scroll past them. Can be used on any element.

Usage

<!-- Simple Example -->
<div data-animate="fadeInLeft"></div>

<!-- With Delay -->
<div data-animate="fadeInLeft" data-delay="500"></div>

Settings

SettingDescription
data-animateThe Animation Style of the Element.
data-delayThe Delay Duration in milliseconds after which the Animation will be triggered.

CSS Variables

[date-animate] {
	--animate-duration: 1s;
	--animate-delay: 1s;
	--animate-repeat: 1;
}