Animations

Canvas ships scroll-triggered entrance animations powered by the Animate.css class set. Add a data-animate attribute to any element and the animation fires when the element scrolls into view. Under the hood an IntersectionObserver watches every [data-animate] element, then applies the animation class plus the animated class once it enters the viewport.

Key Attributes

data-animate: the animation name (space-separated names allowed, plus speed modifiers like faster or slower). Example: data-animate="fadeIn" or data-animate="bounce faster".
data-delay: delay in milliseconds before the animation starts. Baseline internal delay is 500ms; your value is added on top.
data-animate-out: a second animation to play after the entrance (out animation).
data-delay-out: delay in ms before the out animation runs.

The plugin respects prefers-reduced-motion. If the visitor has reduced motion enabled, elements are shown immediately with the animation classes applied but no motion.

Basic Example

<div class="section bg-transparent">
    <h3 class="h1 fw-bold" data-animate="fadeIn">fadeIn</h3>
</div>

With Delay

Stagger multiple elements by increasing the delay:

<div class="row">
    <div class="col-md-4">
        <div class="feature-box" data-animate="fadeInUp" data-delay="100">
            <h3>First</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box" data-animate="fadeInUp" data-delay="300">
            <h3>Second</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box" data-animate="fadeInUp" data-delay="500">
            <h3>Third</h3>
        </div>
    </div>
</div>

Speed Modifiers

Append a speed keyword to slow down or speed up the motion:

<h3 data-animate="bounce slower">bounce slower</h3>
<h3 data-animate="bounce faster">bounce faster</h3>

Common Animation Names

Fades: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInTopLeft, fadeInBottomRight.
Bounces: bounce, bounceIn, bounceInDown, bounceInUp.
Backs: backInDown, backInLeft, backInRight, backInUp.
Attention: flash, pulse, rubberBand, headShake, flip, flipInX, flipInY.

Tips

Animations inside slider slides (.swiper-slide) or .fslider.no-thumbs-animate are skipped by this observer, because the slider plugin controls those animations per slide.
Keep entrance delays under about 800ms so content does not feel sluggish.
Do not over-animate. One clear entrance per section reads better than many competing motions.

Usage

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

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

Settings

Setting	Description
`data-animate`	The Animation Style of the Element.
`data-delay`	The Delay Duration in milliseconds after which the Animation will be triggered.

CSS Variables

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

Was this page helpful?