Introduction

Being a headless library, a default Flexiboard does not animate the movement of widgets.

However, manually adding transitions outside of the library would be tricky. CSS transitions do not animate when grid-row and grid-column values change, which Flexiboards uses under the hood to position placed widgets.

In order to solve this, Flexiboards has a built-in system that allows you to animate the movement of widgets with CSS transitions.

Enabling Transitions

Flexiboards has a built-in helper for quickly adding default transitions to your widgets, simpleTransitionConfig(). Apply this to the transition property of your widget configuration to get a basic set of animations for widget movement events.

Here’s how that looks, once applied:

For many sitations, this base configuration might suffice for you. However, we next discuss how you can set up your own transition configuration.

Customising Transitions

The simpleTransitionConfig() is just a wrapper that returns a default configuration for you. However, the actual schema for transition configurations is as follows:

export type FlexiWidgetTransitionConfiguration = {
	move?: FlexiWidgetTransitionTypeConfiguration;
	drop?: FlexiWidgetTransitionTypeConfiguration;
	resize?: FlexiWidgetTransitionTypeConfiguration;
};

where move determines the transition that plays when a widget moves across cells of a board, drop determines the transition that plays when a widget is released from a grab action, and resize determines the transition that plays when a widget is released from a resize action.

Within, the parameters are:

export type FlexiWidgetTransitionTypeConfiguration = {
	duration?: number;
	easing?: string;
};

• duration controls how long the transition plays for, in milliseconds.
• easing is any valid CSS easing function to determine the transition curve, including cubic-bezier(). For example, the simpleTransitionConfig uses ease-in-out for move and ease-out for drop.

Note that if you omit either of the above properties, or the configuration object entirely, Flexiboards defaults to the behaviour of playing no transition for that scenario.

The below example puts this customisability into use: