Transitions and Easing

Add smooth, animated transitions to any element so that style changes -- on hover, focus, or any other state -- feel polished rather than instant. The Transitions section in the right sidebar lets you pick which properties animate, set their duration, and control the delay before they start.

Overview

CSS transitions tell the browser to interpolate between two values over time instead of snapping from one to the other. In Flowmo, you configure transitions per-element from the Transitions section in the design panel. Each transition targets a specific CSS property (or all properties at once) and includes timing controls for duration and delay.

You can stack multiple transitions on the same element -- for example, fade opacity over 0.4 seconds while sliding the background color over 0.6 seconds. Flowmo stores each one as a separate line item, and you can add or remove them independently.

Prerequisites

• You have a project open in the Flowmo designer.
• You have selected an element on the canvas.
• The right sidebar is visible. Scroll down or search for the Transitions section. If the section header shows a + icon, click it to add your first transition.

Step by step: adding a transition

1. Open the Transitions section

Select your element, then locate the Transitions section in the right sidebar. If no transitions exist yet, the section is collapsed. Click the + button on the section header to add a new transition.

2. Choose a property to transition

When you click +, a dropdown appears listing the available CSS properties. Pick the one you want to animate:

Label	CSS property	Typical use
All	all	Animate every property that changes -- quick setup, slightly less performant
Opacity	opacity	Fade in/out effects
Transform	transform	Scale, rotate, translate, or skew animations
Background Color	background-color	Smooth color shifts on hover or state change
Border Color	border-color	Highlight borders on focus or hover
Box Shadow	box-shadow	Animate shadow depth for elevation effects
Color	color	Transition text color
Width	width	Animate element width changes
Height	height	Animate element height changes
Left	left	Slide positioned elements horizontally
Top	top	Slide positioned elements vertically
Right	right	Slide positioned elements horizontally (from right)
Bottom	bottom	Slide positioned elements vertically (from bottom)
Margin	margin	Animate spacing around the element
Padding	padding	Animate internal spacing
Font Size	font-size	Grow or shrink text size

Once a property is added to the element, it no longer appears in the dropdown -- each property can only have one transition at a time.

3. Set the duration

Each transition row shows a Duration (s) field. This controls how long the animation takes from start to finish, in seconds. The default is 0.3 s (300 ms).

• Type a value directly into the field or use the scrubber.
• Keep durations under 0.5 s for UI feedback (hover effects, button presses).
• Use longer durations (0.6--1.2 s) for decorative or scroll-triggered reveals.

4. Set the delay

The Delay (s) field controls how long the browser waits before starting the transition. The default is 0 (no delay).

• Use a short delay (0.05--0.15 s) to stagger multiple elements for a cascade effect.
• Avoid delays on interactive states like hover -- users expect immediate feedback.

5. Add more transitions (optional)

Click the + button again to add transitions for additional properties. Each one gets its own duration and delay. For example, you might transition Opacity at 0.3 s and Transform at 0.5 s with a 0.1 s delay.

6. Remove a transition

Each transition row has a trash icon on the right side. Click it to remove that transition. If you remove all transitions, the section collapses back to its empty state.

---

Combining transitions with element states

Transitions on their own do not create visible animation -- they only define how a change should animate. You need a trigger that changes the property value. The most common trigger is an element state like Hover or Focus (see Element States).

A typical workflow:

1. Select your element and add a transition for Opacity with a duration of 0.3 s.
2. Open the States section and add a Hover state.
3. With the Hover state active, change the element's opacity to 0.7.
4. Preview the page -- the element now fades smoothly when you hover over it.

---

Tips

• Start with "All" for prototyping. It transitions every property that changes, which is convenient while you are exploring. Before shipping, switch to specific properties for better performance.
• Keep interactive transitions fast. Hover and focus transitions above 0.4 s feel sluggish. Aim for 0.2--0.3 s for buttons and links.
• Use Transform and Opacity for smooth animation. These two properties can be animated on the GPU, which means they stay smooth even on slower devices. Animating Width, Height, Margin, or Padding triggers layout recalculations and can cause jank on complex pages.
• Transitions are bidirectional. The same duration and delay apply when the element returns to its original state (e.g., when you move the mouse away from a hover target).
• Transitions inherit through classes. If you apply a transition on a class, every element with that class gets the same transition. Use the cascade indicator next to the field to check where the value is coming from.

Common issues

Problem	Cause	Fix
Nothing animates on hover	No transition is set, or the transition targets a different property than the one you changed	Make sure the transition property matches the property you changed in the hover state, or use All
Animation feels instant	Duration is 0 or very small	Increase the Duration (s) value to at least 0.2
Animation starts too late	A delay is set	Set Delay (s) back to 0
Property is missing from the dropdown	It is already added as a transition	Scroll through your existing transitions -- the property is already there
Transition works in preview but not on export	The transition is set on a local override instead of a class	Check the cascade indicator and move the transition to the correct class

Related articles

• Element States (Hover, Active, Focus) -- define what changes when a state is active
• Design System Variables -- use variables for consistent timing values across your project
• Components and Instances -- transitions inside component variants