Matrix Animations

Overview

Matrix Framework ships a complete animation toolkit powered by Motion One. Everything runs from the main bundle — viewport entrance effects, scroll parallax, sticky pinning, CSS link/button micro-interactions, split text, and slot counters.

• Global animations — one HTML widget applies entrance motion to all content modules
• Custom classes — add motion-* classes to any element
• Scroll effects — parallax, spin, zoom, opacity, blur via data-motion-scroll
• Sticky sections — pin cards while scrolling with has-sticky
• Split text & counters — word/letter reveals and odometer numbers

1 Global animations

Paste the snippet below into a Widget/HTML module in the content area (or footer) to apply one entrance effect to every Jimdo module in .hs-content.

<script type="text/javascript">
//<![CDATA[
(function() {
  'use strict';
  var config = {
    effect: 'motion-fadeInUp',   // motion-fadeIn, motion-slideUp, motion-zoomIn, etc.
    speed: 'motion-normal',      // motion-slower … motion-fastest
    offset: 100,                 // viewport offset in px (0, 25, 50, 100)
    sequential: false            // true = 25ms stagger between modules
    // delay: 'motion-delay-x1'  // optional: motion-delay-x1, x2, x3
    // mobile: 'motion-mobile-hidden' // optional: disable on mobile
  };
})();
//]]>
</script>
<div class="matrix-msg invisible">Global animations</div>

How targeting works

• Regular modules animate as a whole when they enter the viewport
• Modules containing .is-fullwidth or .hs-fullwidth only animate inner .is-anim-block children
• Elements with text-split are skipped — split text manages its own reveal

2 Custom animations

Add a motion-* class directly to any element. The animation runs when the element scrolls into view.

<div class="motion-fadeIn">Fades in on scroll</div>

<div class="motion-slideUp motion-faster motion-delay-x1 motion-mobile-hidden">
  Fast slide-up with delay, disabled on mobile
</div>

Motion One entrance classes

Fold, flip & skew classes

Utility classes

Matrix Variables

Insert animation classes via a Variables tag on a columns module:

<var> motion-slideUp motion-delay-x1 </var>

With <var>, the effect applies to the whole columns module. For per-column control, use <ins> inside each column instead.

3 Scroll animations

Motion Scroll Effects replace the legacy enllax.js library. Add data-motion-scroll attributes to move, spin, zoom, or fade elements as the user scrolls.

<!-- Background parallax -->
<div data-motion-scroll="background" data-motion-ratio="0.5">
  Background moves slower than scroll
</div>

<!-- Foreground parallax -->
<img src="photo.jpg" alt=""
     data-motion-scroll="foreground"
     data-motion-ratio="0.8"
     data-motion-direction="horizontal-reverse" />

<!-- Spin on scroll -->
<div data-motion-scroll="spin" data-motion-ratio="0.5">
  <div class="fa fa-thumbs-up fa-5x"></div>
</div>

<!-- Zoom out while scrolling -->
<img src="hero.jpg" alt="" data-motion-scroll="zoom-out" />

Available scroll effects

Direction & ratio

4 Sticky animations

Pin sections while scrolling, then release them when a destroy trigger or the next card reaches the top. Built into Matrix Framework v1.7.6+ — no ScrollMagic, no jQuery.

<!-- Card that sticks while scrolling -->
<div class="is-matrix is-card has-sticky">…</div>

<!-- Next card stacks on top (cascading peek) -->
<div class="is-matrix is-card has-sticky has-sticky-top-margin">…</div>

<!-- End the sticky sequence -->
<div class="has-sticky-destroy">…</div>

Key classes

5 Animated links

CSS-only link hover effects — add classes to any <a> tag.

<a class="link-flash has-link-dark" href="#">Link Flash</a>

<a class="link-outlined line-bold" href="#">Link Outlined bold</a>

<a class="arrow-link" href="#">See more<span class="arrow">&#160;</span></a>

6 Animated buttons

Add anim-btn to any hs-button for a hover sweep effect. Combine with ghost and color classes.

<a class="hs-button anim-btn" href="#">Animated button</a>

<a class="hs-button anim-btn ghost-primary" href="#">Ghost primary</a>

<a class="hs-button anim-btn ghost-white has-white-color-border-shadow" href="#">
  Ghost white with shadow
</a>

For full button styling (colors, padding, radius, hover states), use the Style Editor Buttons panel — including hover animations in Advanced.

7 Floating animations

Continuous gentle movement — ideal for icons, badges, or decorative elements.

<div class="anim-up-down">…</div>

<!-- Or via Matrix Variables on a columns module -->
<var> anim-left-right </var>

8 Animated text

Scroll-triggered split text built with Motion One and SplitType. Add text-split plus one effect attribute. No extra CDN scripts required.

<h2 words-slide-up text-split>Words Slide Up Effect</h2>

<h2 letters-fade-in-random text-split>Letters Fade In Random</h2>

<p scrub-each-word text-split>
  This sentence scrubs word by word as you scroll.
</p>

9 Slot counter

Odometer-style animation for numbers and text — each character scrolls through a vertical reel before landing on the final value. Respects prefers-reduced-motion.

<!-- Numbers -->
<p class="counter" data-counter-effect="slot">25</p>
<p class="counter-slot-slow">5000</p>

<!-- Words (auto-detected) -->
<h1 class="counter counter-slow center-align size-30"
    data-counter-effect="slot"
    data-counter-alternate-speed
    data-counter-spins="2">
  The choice is yours.
</h1>

Useful attributes

Next steps