Quill Animate

Entrance Animations

12 GPU-composited entrance animations. ~1.3KB shipped to the browser (CSS + JS). Zero dependencies. Add animate: 'fade-up' to any partial, or wrap content in {% animate %}.

12 effects~1.3KB totalCSS keyframesIntersectionObserverprefers-reduced-motion

Effect Catalog

12

Every effect runs on the GPU compositor thread (transforms + opacity). Click Replay to re-trigger any animation.

Quill Animate

Entrance animation

fade

Simple opacity fade

Quill Animate

Entrance animation

fade-up

Fade in from below

Quill Animate

Entrance animation

fade-down

Fade in from above

Quill Animate

Entrance animation

fade-left

Fade in from left

Quill Animate

Entrance animation

fade-right

Fade in from right

Quill Animate

Entrance animation

slide-up

Slide up (no fade)

Quill Animate

Entrance animation

slide-down

Slide down (no fade)

Quill Animate

Entrance animation

scale-up

Scale in from small

Quill Animate

Entrance animation

scale-down

Scale in from large

Quill Animate

Entrance animation

blur-in

Fade with blur clear

Quill Animate

Entrance animation

clip-up

Clip mask reveal upward

Quill Animate

Entrance animation

none

Visible immediately (opt out)

Usage

Add animate to any Quill UI partial. Compare the code needed against vanilla HTML+JS, GSAP, and CSS-only approaches.

Animate a heading

1{% render 'q-heading', text: section.settings.heading, animate: 'fade-up' %}

Lines of code

Rendering code only. Quill Animate handles the runtime for you.

Full animated section

1<section class="q-section">
2  <div class="q-container q-container--narrow text-center">
3    {% render 'q-eyebrow', text: eyebrow, animate: 'fade' %}
4    {% render 'q-heading', text: heading, animate: 'fade-up' %}
5    {% render 'q-body', html: body, animate: 'fade-up', animate_delay: 0.15 %}
6    {% render 'q-btn', text: cta_text, url: cta_url, animate: 'fade-up', animate_delay: 0.3 %}
7  </div>
8</section>

Lines of code

Rendering code only. Quill Animate handles the runtime for you.

Stagger

Wrap children in {% animate 'fade-up', stagger: 0.1 %} and each child animates sequentially with an incremental delay.

Free shipping

Easy returns

24/7 support

Price matching

Gift wrapping

Loyalty rewards

Stagger: 0.1s

Each child animates 100ms after the previous

Stagger code comparison

1{% animate 'fade-up', stagger: 0.1 %}
2  <div class="feature-card">Free shipping</div>
3  <div class="feature-card">Easy returns</div>
4  <div class="feature-card">24/7 support</div>
5  <div class="feature-card">Price matching</div>
6{% endanimate %}

Lines of code

Rendering code only. Quill Animate handles the runtime for you.

Customisation

Adjust duration, delay, and easing. The generated Quill code updates live.

Your heading here

Preview with custom settings

Generated code

{% render 'q-heading', text: heading, animate: 'fade-up' %}