Animation integration

START WITH WHAT YOU WANT TO ANIMATE

Three ways to add motion.

Use a class for a visual effect, enable motion on a supported component, or use an OutSystems Block to manage a panel or workspace.

A visual effect

Add fade, slide, zoom or hover effects with CSS classes. The animation stylesheet is included in Community.

Explore effects & CSS

An existing component

Enable motion on supported buttons, inputs, menus, grids and charts. Keep their existing data and events.

Set up component motion

A panel or workspace

Use reusable OutSystems Blocks for reveal, collapse and view changes, with settings you bind in Service Studio.

Find an OutSystems Block

Looking for a Block’s properties?

The API tab lists the settings you see when you select an animation Block in Service Studio. Each entry explains its purpose, property types and defaults.

Open OutSystems Block settings

Add motion to your application.

Choose your platform for setup instructions. The underlying effects are shared; the integration follows your platform’s lifecycle.

Add the references
In Service Studio, reference the animation Blocks and Motion_* Client Actions from BluKavantUi_Community_Layout.
Choose the right place for motion
For CSS effects, place MotionProvider around your content and use a Container’s Style Classes or a Block’s ExtendedClass. For a supported component, set EnableMotion=True.
Set the timing and preference
Keep MotionPreference="System". To match the demo, set UseDefaultMotionDuration=False and MotionDurationMs=750.

Service Studio · MotionContainer properties

MotionContainer
  EnableMotion = True
  MotionPreference = "System"
  UseDefaultMotionDuration = False
  MotionDurationMs = 750
  Effect = "slide-up"
  ReplayKey = ReplayRevision

// ReplayRevision is a Text local variable.
// In your Replay button action, assign:
ReplayRevision = ReplayRevision + "1"

Switching between workspace views

Place your two views in WorkspaceTransition’s First and Second placeholders. Bind ActivePanel to your screen state. The content stays mounted so notes and selections can survive switching back.

Use FocusFallbackId for a visible focus destination when the active control would become hidden. OutSystems continues to handle navigation between screens.

View workspace settings

Open OutSystems playground ↗See native animation examples ↗

Import the styles once
Motion helpers and CSS ship inside Community. Also include the normal stylesheet for each component you use.
Create a controller for your screen
Use the motion component factories for supported components. Their existing options and events still apply.
Clean up when the screen is removed
Destroy the component instances before destroying their controller.

Web · application setup

import '@blukavantui/community/motion.css';
import '@blukavantui/community/component-motion.css';
import { createMotionController } from '@blukavantui/community/motion';
import { createMotionComponents } from '@blukavantui/community/component-motion';

const screenRoot = document.querySelector('#your-screen');
const motion = createMotionController(screenRoot, 'system');
const ui = createMotionComponents(motion, { duration: 750 });

// Create supported components through ui, with their usual options/events.
// When the owning screen is removed:
ui.destroy();
motion.destroy();

Pro components and charts

Licensed Pro motion is available through @blukavantui/pro/grid-motion, workflow-motion and advanced-motion. For charts, use a selective entry such as @blukavantui/charts-community/motion/line, or the corresponding licensed chart entry.

The examples target the prepared 1.2 packages. Public packages remain on their current release while this update is under review.

OUTSYSTEMS / SERVICE STUDIO

OutSystems Block settings

These are the properties you configure when you select an animation Block in Service Studio. Expand a Block to see its property names, types, defaults and usage.

Which duration will run?

UseDefaultMotionDuration=True uses the effect’s shared timing. Set it to False and enter MotionDurationMs=750 to match the playground. The stored duration input is 450 ms until you change it.

Shared settings

Shared motion preferencesWrap your content to provide animation styling and shared motion settings.MotionProvider

In Service Studio: BluKavantUi_Community_Layout → MotionProvider
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`True`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.

Content and layout

Animate a containerApply an entrance or exit effect and replay it when your screen state changes.MotionContainer

In Service Studio: BluKavantUi_Community_Layout → MotionContainer
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`Effect`Text	`"fade"`	The effect name, such as fade or slide-up.
`ReplayKey`Text	`""`	Change this value to replay the effect; keep it stable during unrelated refreshes.
`Origin`Text	`"center"`	The point from which the effect transforms the content, such as center.
`Phase`Text	`"enter"`	Choose the enter or exit phase of an effect.

Show and hide contentFinish the transition while managing hidden content and focus.MotionVisibility

In Service Studio: BluKavantUi_Community_Layout → MotionVisibility
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`IsVisible`Boolean	`True`	Bind to the Boolean that controls whether the content is shown.
`Effect`Text	`"fade"`	The effect name, such as fade or slide-up.
`FocusFallbackId`Text	`""`	DOM Id of a visible focus destination when the currently focused content is hidden. Prefer a nearby trigger or heading.

Expand and collapseAnimate a panel opening or closing as its size changes.MotionCollapse

In Service Studio: BluKavantUi_Community_Layout → MotionCollapse
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`IsVisible`Boolean	`True`	Bind to the Boolean that controls whether the content is shown.
`FocusFallbackId`Text	`""`	DOM Id of a visible focus destination when the currently focused content is hidden. Prefer a nearby trigger or heading.
`Axis`Text	`"height"`	The dimension to animate. The default collapses the height.

Reveal on scrollIntroduce content as it comes into view.MotionReveal

In Service Studio: BluKavantUi_Community_Layout → MotionReveal
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`Effect`Text	`"fade"`	The effect name, such as fade or slide-up.
`Once`Boolean	`True`	Reveal once when True; allow subsequent reveals when False.

Animate a sequenceBring a group of items into view with a delay between each item.MotionStagger

In Service Studio: BluKavantUi_Community_Layout → MotionStagger
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`Effect`Text	`"fade"`	The effect name, such as fade or slide-up.
`ReplayKey`Text	`""`	Change this value to replay the effect; keep it stable during unrelated refreshes.
`Order`Text	`"forward"`	Optional setting for this effect.
`Columns`Integer	`1`	Optional setting for this effect.
`GapMs`Integer	`45`	Optional setting for this effect.

Switch workspace viewsMove between two panels while keeping their content mounted.WorkspaceTransition

In Service Studio: BluKavantUi_Community_Layout → WorkspaceTransition
Content placeholders: First, Second

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`Effect`Text	`"fade"`	The effect name, such as fade or slide-up.
`ActivePanel`Text	`"First"`	Choose First or Second to show the corresponding workspace placeholder.
`FocusFallbackId`Text	`""`	DOM Id of a visible focus destination when the currently focused content is hidden. Prefer a nearby trigger or heading.

Feedback and decoration

Highlight a changeDraw attention to an update or validation feedback.MotionFeedback

In Service Studio: BluKavantUi_Community_Layout → MotionFeedback
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`Feedback`Text	`"highlight"`	Optional setting for this effect.
`ReplayKey`Text	`""`	Change this value to replay the effect; keep it stable during unrelated refreshes.

Add decorative effectsApply optional ripple, glow or other decoration, with active and pause settings.MotionDecoration

In Service Studio: BluKavantUi_Community_Layout → MotionDecoration
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`Decoration`Text	`"ripple"`	Optional setting for this effect.
`IsActive`Boolean	`False`	Optional setting for this effect.
`PauseMotion`Boolean	`False`	Pause the continuing effect while retaining the component content.
`LoopDurationMs`Integer	`0`	Optional duration of a repeating decoration. Zero uses the foundation default. PauseMotion, Reduced and Off suppress continuing decorative movement.

Animate an iconReflect an active state with a small icon transition.MotionIcon

In Service Studio: BluKavantUi_Community_Layout → MotionIcon

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`IconKind`Text	`"chevron"`	Optional setting for this effect.
`IsActive`Boolean	`False`	Optional setting for this effect.

Show loading progressDisplay a loading treatment with an accessible label.MotionLoading

In Service Studio: BluKavantUi_Community_Layout → MotionLoading

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`LoadingLabel`Text	`"Loading"`	Optional setting for this effect.
`LoadingVariant`Text	`"Spinner"`	Optional setting for this effect.
`UseProgressValue`Boolean	`False`	Optional setting for this effect.
`ProgressValue`Decimal	`0`	Optional setting for this effect.

Zoom a photoChange a photo’s zoom using its active state.MotionPhotoZoom

In Service Studio: BluKavantUi_Community_Layout → MotionPhotoZoom
Content placeholders: Content

Property	Default	What it does
`EnableMotion`Boolean	`False`	Opt in to the 1.2 animation adapter for this instance. Existing component instances remain unchanged when False. MotionProvider itself defaults to True.
`MotionPreference`Text	`"System"`	System follows the operating-system reduced-motion preference. Reduced removes large movement and uses gentle opacity feedback. Off completes immediately. Do not override a user's reduced-motion preference.
`UseDefaultMotionDuration`Boolean	`True`	True uses the shared effect timing. Set False to use MotionDurationMs. The demonstration pages explicitly use False and 750 ms.
`MotionDurationMs`Integer	`450`	Duration override in milliseconds, used only when UseDefaultMotionDuration is False. The stored input default is 450; the 1.2 playground starts at 750 ms.
`MotionEasing`Text	`"standard"`	Motion easing name. Use standard, ease-in, ease-out or ease-in-out from the shared motion foundation. Unsupported values are validated by the adapter.
`ExtendedClass`Text	`""`	Additional CSS classes applied to this Block.
`IsActive`Boolean	`False`	Optional setting for this effect.

Client Actions

Call these from your screen’s action flow. Use the owning container’s DOM Id, and a target inside it when required. Check ErrorMessage before continuing.

Cancel an effectCancel an animation on a target inside the owning container.Motion_Cancel

Inputs

Property	Default	What it does
`OwnerId`Text · Required	`""`	The DOM Id of the motion container that owns the target.
`TargetId`Text · Required	`""`	The DOM Id of the target inside the owning motion container.

Outputs

Output	Default	What it does
`ErrorMessage`Text	`""`	Check for a reported error before continuing your action flow.

Play an effectTrigger an animation from a Client Action.Motion_Play

Inputs

Property	Default	What it does
`OwnerId`Text · Required	`""`	The DOM Id of the motion container that owns the target.
`TargetId`Text · Required	`""`	The DOM Id of the target inside the owning motion container.
`Effect`Text	`"fade"`	The effect name, such as fade or slide-up.
`Phase`Text	`"enter"`	Choose the enter or exit phase of an effect.

Outputs

Output	Default	What it does
`Outcome`Text	`""`	The result reported by the play action.
`ErrorMessage`Text	`""`	Check for a reported error before continuing your action flow.

Change motion preferenceApply System, Reduced or Off to the owning container.Motion_SetPreference

Inputs

Property	Default	What it does
`OwnerId`Text · Required	`""`	The DOM Id of the motion container that owns the target.
`Preference`Text	`"System"`	System, Reduced or Off. System follows the device preference.

Outputs

Output	Default	What it does
`ErrorMessage`Text	`""`	Check for a reported error before continuing your action flow.

Property names, types and defaults match the captured 1.2 OutSystems producer models.

JavaScript is off. All setup and reference sections are shown below.#motion-integration [hidden]{display:block!important}#motion-integration [role=tablist],#motion-integration .motion-guide-platform,#motion-integration [data-motion-copy]{display:none}

Three ways to add motion.

A visual effect

An existing component

A panel or workspace

Looking for a Block’s properties?

Add motion to your application.

Add the references

Choose the right place for motion

Set the timing and preference

Switching between workspace views

Import the styles once

Create a controller for your screen

Clean up when the screen is removed

Pro components and charts

OutSystems Block settings

Shared settings

Content and layout

Feedback and decoration

Client Actions

Inputs

Outputs

Inputs

Outputs

Inputs

Outputs

Keep the task comfortable and usable.

System

Reduced

Off

Focus, content and feedback

Search BluKavantUI