Animations

AdminKit 4 has a small set of animations, in the free version and in AdminKit PRO: cards fade up as they scroll into view, stat numbers count up, charts animate in, and content that JavaScript draws shows a skeleton until it is ready. With prefers-reduced-motion: reduce, nothing moves.

Reveal on scrollCopy Anchor Link

Every top-level card inside .ak-reveal-cards fades up when it scrolls into view; the layouts put that class on <main>, so the cards of every page do it without extra markup. Add .ak-reveal to any other element to animate it the same way. Elements that come into view together are staggered by 60 ms each, up to eight steps.

<main class="content ak-reveal-cards">
  <div class="card">...</div>
  <div class="card">...</div>
  <p class="ak-reveal">Fades up as well.</p>
</main>

The hidden starting state only applies under html.js-reveal, which an inline script in <head> sets. Copy that script from src/partials/site-meta.hbs into your own <head>, next to the color mode script. Without it, nothing is hidden. If the page scripts have not run after three seconds, the script shows the content anyway.

Count-up numbersCopy Anchor Link

data-count-up counts a number up from zero the first time it scrolls into view. The element's text is the final value and sets the format: a prefix or suffix ($, %, +), , thousands separators and decimals stay as written.

<div class="row">
  <div class="col-6">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Earnings</h2>
        <div class="h1 mt-1 mb-0" data-count-up>$21,300</div>
      </div>
    </div>
  </div>
  <div class="col-6">
    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Conversion</h2>
        <div class="h1 mt-1 mb-0" data-count-up>3.65%</div>
      </div>
    </div>
  </div>
</div>

Put it on an element that holds only the number and sits on a line of its own, like the .h1 of the stat cards, so its changing width moves nothing else. The text in the HTML is always the final value, which is what screen readers read.

SkeletonsCopy Anchor Link

For content that JavaScript draws, such as charts, maps or rows from an API, show a skeleton until it is ready. Put aria-busy="true" on the card body and the skeleton markup inside a position-relative element that has the content's final height, so nothing moves when the content arrives:

<div class="card">
  <div class="card-body" aria-busy="true">
    <div class="position-relative" style="min-height: 120px">
      <div class="ak-skeleton placeholder-glow" aria-hidden="true">
        <span class="placeholder"></span>
      </div>
      <div id="report">
        <p class="mb-0">The report has loaded.</p>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <button type="button" class="btn btn-primary" id="report-ready">
      Mark as ready
    </button>
  </div>
</div>
<script>
  document.getElementById("report-ready").addEventListener("click", function () {
    adminkit.ready(document.getElementById("report"));
  });
</script>

In the template's Handlebars pages the skeleton is the {{> skeleton }} partial. adminkit.chartjs() and adminkit.vectorMap() remove it when they have drawn (in AdminKit PRO also adminkit.apexcharts() and the DataTables init). For anything else, call adminkit.ready(element): it removes the skeletons in the closest aria-busy="true" element, sets aria-busy="false" and fires adminkit:ready on element.

Motion tokensCopy Anchor Link

Durations and easings are Sass variables in src/scss/1-variables/_app.scss, exposed as custom properties:

Bootstrap's fade and collapse transitions, the dropdowns and the sidebar use them (in AdminKit PRO also the modal, offcanvas and toast transitions). Use the custom properties in your own CSS, and write Sass transitions with Bootstrap's @include transition(...) mixin, which turns them off under reduced motion.

Reduced motionCopy Anchor Link

When the operating system asks for reduced motion (prefers-reduced-motion: reduce):

• revealed cards only fade in, without moving up
• data-count-up numbers show their final value at once
• charts draw without their entrance animation
• transitions written with the transition() mixin are turned off

Keep it that way in your own additions: an animation may fade under reduced motion, but must not move anything.

Clickable cards (a.card, or a card with a .stretched-link) lift on hover and keyboard focus; that needs no markup either.