Base animations

Part of the library. One import.

Use the selective motion stylesheet in your application entry. It includes the keyframes, easing classes, timing tokens and reduced-motion rules. You do not need to copy keyframes or download a separate file.

import '@blukavantui/community/motion.css';

Already using the full Community stylesheet? The prepared release includes base motion there too. Use one of these stylesheet approaches.

import '@blukavantui/community/styles.css';

From a stylesheet processed by your bundler, use @import instead. A bare package name does not resolve in an unbundled browser stylesheet.

@import '@blukavantui/community/motion.css';

.welcome-panel {
  --blu-motion-duration: 750ms;
  --blu-motion-delay: 0ms;
  --blu-motion-distance: 20px;
}

<section class="welcome-panel blu-motion-enter-slide-up blu-motion-ease-out">
  <h2>Your workspace is ready.</h2>
</section>

CSS does not need the JavaScript runtime

A class plays when the element or class is introduced. Hover lift responds to hover and keyboard focus. Replaying a class needs a small JavaScript action; scroll detection, interruption-safe panels and coordinated effects use the library helpers.

import { createMotionController, createMotionPresence, createScrollReveal }
  from '@blukavantui/community/motion';

OutSystems · v1.2.0

The native Community library includes the shared CSS through MotionProvider in BluKavantUi_Community_Layout. Set EnableMotion to True, then apply these classes through a Container's Style Classes or a supported Block's ExtendedClass. Put CSS custom properties in the Screen, Theme or Block stylesheet. Use MotionContainer's ReplayKey, Motion_Play, or the stateful motion Blocks for managed native interactions.

Open the native Animations playground and CSS reference · v1.2 →

View the integration notes →

Lift a card on hover or focus

Add one class to a link or button. Keep its ordinary focus outline and give it a useful accessible name.

<a class="blu-motion-hover-lift" href="/your-next-screen">
  Build your next screen
</a>

Fade a container in as you scroll

Scroll inside this preview. Each card enters when it becomes visible. Content stays readable if JavaScript is unavailable.

Scroll to reveal a card.

import '@blukavantui/community/motion.css';
import { createMotionController, createScrollReveal }
  from '@blukavantui/community/motion';

const scope = document.querySelector('#your-screen');
const motion = createMotionController(scope, 'system');
const reveal = createScrollReveal(
  scope.querySelectorAll('[data-reveal]'), motion,
  { effect: 'slide-up', duration: 750, easing: 'ease-out', once: true }
);

// When the owning screen is disposed:
// reveal.destroy();
// motion.destroy();

<main id="your-screen">
  <section data-reveal>Your first section</section>
  <section data-reveal>Your next section</section>
</main>

Let a panel finish closing

Use presence when a real panel must leave the layout. Closing makes it inert immediately, moves focus to the trigger if needed, and sets hidden after the exit. Fast toggles stay safe.

Detail is visible.

<main id="your-screen">
  <button id="toggle-detail" aria-expanded="true" aria-controls="detail">
    Toggle detail
  </button>
  <section id="detail">Your detail content</section>
</main>

import '@blukavantui/community/motion.css';
import { createMotionController, createMotionPresence }
  from '@blukavantui/community/motion';

const scope = document.querySelector('#your-screen');
const trigger = scope.querySelector('#toggle-detail');
const panel = scope.querySelector('#detail');
const motion = createMotionController(scope, 'system');
const presence = createMotionPresence(panel, motion);
let open = !panel.hidden;
const toggle = () => {
  open = !open;
  trigger.setAttribute('aria-expanded', String(open));
  const options = { effect: 'fade', duration: 750, focusFallback: trigger };
  if (open) void presence.show(options);
  else void presence.hide(options);
};
trigger.addEventListener('click', toggle);

// When the owning screen is disposed:
// trigger.removeEventListener('click', toggle);
// presence.destroy();
// motion.destroy();

A short sequence, in reading order

Stagger the visual entrance without changing DOM order or tab order.

import { playStagger } from '@blukavantui/community/motion';

await playStagger(motion, scope.querySelectorAll('[data-step]'), 'slide-up', {
  duration: 750, gap: 100, order: 'forward', easing: 'ease-out'
});

19 base animations. Enter and exit.

Use one effect class at a time. These names are generated from the same effect definitions as the JavaScript API.

Timing, easing and small feedback

Respect the user's motion preference

The CSS helpers stop animations and transitions when the device requests reduced motion, or inside an explicit reduced/off scope. The JavaScript controller uses short, movement-free fades in Reduced and immediate state changes in Off. A System setting never overrides the device preference.

<section class="blu-motion-off">
  Your content
</section>

Keep content and controls usable

• Use error text and accessible state alongside any nudge or highlight.
• Blur, flips and circular reveals suit decorative visuals. Keep important text and controls outside them.
• An exit class does not remove an element from the accessibility tree or keyboard order. Use presence or your own hidden/inert/focus lifecycle.
• Use scroll reveal as progressive enhancement. Do not hide unrevealed content in the base HTML.
• Keep animations brief; continuous effects need pause/stop behavior. Do not autoplay decorative loops on page load.

The native development demo is linked from CSS & setup. Public release remains on hold; these examples do not claim complete screen-reader certification.