Overview & Quick Start

Download the runtime files

The v1.0 package includes the readable and minified runtime, shared schema, compiled CSS, SCSS partial, extended preset pack, license, and installation notes. The core runtime works by itself; load the included preset pack when you want the advanced named sets used throughout these docs.

Installation

Put the small first-paint bootstrap in the head, load the stylesheet, optionally load the included preset pack, and then load the deferred runtime. The preset pack must come before hf-motion.min.js:

<script>
(function (document, window) {
  document.documentElement.classList.add('hf-motion-pending');
  window.HFMotionFirstPaintTimer = window.setTimeout(function () {
    document.documentElement.classList.remove('hf-motion-pending');
  }, 3000);
}(document, window));
</script>
<link rel="stylesheet" href="https://animate.humanfriend.digital/cdn/v1.0.0/hf-motion.css">
<script>window.HFMotionConfig = window.HFMotionConfig || {};</script>
<script src="https://animate.humanfriend.digital/cdn/v1.0.0/hf-motion-sets.js"></script>
<script src="https://animate.humanfriend.digital/cdn/v1.0.0/hf-motion.min.js" defer></script>

When using the SCSS partial from /sass/main.scss and storing it in /animate/_hf-motion.scss, import it with:

@import "../animate/hf-motion";

The core model

HF Motion is designed to make polished animation easy to enter and easy to maintain. Start with one readable preset class, add a modifier for a familiar variation, and reach for data attributes only when a design needs an exact value. Some coding is still available—and sometimes necessary—but the class-first model keeps ordinary implementation simple enough to understand, copy, and use immediately.

Four essential patterns

One-class reveal

<div class="hf-fade-up" data-hf-trigger="load">Opening content</div>

Preset plus modifier

<div class="hf-fade-up hf-slow">Content</div>

Exact override

<div class="hf-parallax" data-hf-parallax-speed="0.65">Content</div>

Fade plus parallax

<div class="hf-fade-up hf-parallax">Your content</div>

Where to go next