In this article, you’ll get an overview of the Interactions panel and how to start creating basic animations.
The interactions panel
Creating a custom interaction
To create an interaction, switch to the Interact tab in the Design panel.
If this is your first interaction, the panel will be empty. Otherwise, you’ll see all existing ones listed under Scene interactions.
Once you select an element on the canvas (a frame, text layer, or shape), the panel will display animation presets and an “Add interaction +” button.
Click the button to create a new interaction – first choose the event type (click, hover, scroll, mouse move, etc.), then select the animation type (parametric, auto animation, timeline, Lottie, and so on).
📝 Note: You can rename any interaction directly from the panel to keep your project organized.
Interactions with animation presets
In the Interactions panel, you’ll see a list of animation presets – each displayed as a small thumbnail with a live preview that shows how the animation will look once applied.
These previews help you quickly identify the right motion type without guessing how it behaves.
Clicking a preset automatically creates a new interaction based on that animation.
You can then open the interaction’s settings to edit, fine-tune, or replace any part of it – including its duration, easing, trigger, or target – just like any other interaction in Flowmo.
Interaction structure
Every interaction consists of three key elements – the trigger, the target, and the interaction settings – that together define how your animation works.
Trigger – The element that activates the interaction.
By default, it’s the element you selected before creating the interaction, but you can assign any other element, layer type, or class.Target – The element that responds when the trigger is activated.
Interaction type settings – The main panel where you adjust properties like parameters, timing, delays, easing, and animation states.
The small properties button next to the interaction type lets you switch between types or adjust parameters for parametric animations.
📝 Note: Some interaction presets include unique settings.
For example, a custom cursor has options like area of action and follow mouse instead of trigger and target.
Animation settings
When you create or edit an interaction, the animation settings panel lets you control how your motion behaves – including its timing, easing, and keyframes.
Duration – sets how long the animation lasts, in seconds.
A shorter duration makes the motion feel snappier, while a longer one creates smoother, slower transitions.
Ease – defines the speed curve of the animation over time.
Different easing types (such as Expo, Cubic, or Linear) change how the movement accelerates and decelerates, giving the animation a more natural feel.
Keyframes – let you build multi-step animations.
You can add additional keyframes with the Add Keyframe + button to define separate motion stages (for example: move → pause → rotate).
Each keyframe can have its own duration, delay, and easing values.
Dynamic – When enabled, the animation starts from the element’s current state rather than its original starting point.
This is useful when an element has already moved or changed before the animation runs (for example, when chaining multiple interactions or working with adaptive layouts).
👉 Liked this article? Dive into our Academy and learn how to add more animations – effortlessly and fast.