Interaction Actions: addClass, setAttribute, textScramble, svgDraw, counter & More

Overview

In Flowmo, interactions consist of two parts: animations (visual property changes like opacity, scale, offset) and actions (one-shot or progress-driven behaviors like adding a class, scrambling text, or drawing an SVG path). Actions appear under the Actions category in the "Add Property" dropdown inside any interaction effect editor (the "From" or "To" panel). They are marked with a lightning bolt icon to distinguish them from standard CSS animation properties.

Actions fire at specific moments during the animation lifecycle:

• onStart actions fire once when the animation begins (e.g., Add Class, Set Attribute).
• onUpdate actions fire continuously as the animation progresses (e.g., Text Scramble, Counter, SVG Draw).

Prerequisites

• You have an element selected on the canvas.
• You have created an interaction on the element (Appear, Hover, Click, Scroll, etc.) via the Interact section in the right sidebar.
• You are inside an effect editor -- the "From" or "To" panel of an interaction.

How to Add an Action

1. Select your element and open the Interact section in the right sidebar.
2. Create or open an existing interaction (e.g., Appear, Hover, or Click).
3. Click into the From or To effect panel. You will see the default animation properties: Opacity, Scale, Rotate, Skew, and Offset.
4. Below those defaults, click the Add Property button (dashed border with a + icon).
5. A popover appears with properties grouped by category: Colors, Dimensions, Effects, Typography, Layout, and Actions.
6. Scroll to the Actions section, or type a search query like "class" or "counter" in the search field.
7. Click an action to add it. A configuration panel appears inline, showing the action's parameters.

Available Actions

Class Manipulation (fire onStart)

Add Class

• Label: Add Class
• Parameters:
• Class Name (text) -- The CSS class to add to the element (e.g., my-class).
• Use case: Toggle visual states by adding a class that has different styles defined.

Remove Class

• Label: Remove Class
• Parameters:
• Class Name (text) -- The CSS class to remove (e.g., my-class).
• Use case: Revert an element to its default state by removing a previously-added class.

Toggle Class

• Label: Toggle Class
• Parameters:
• Class Name (text) -- The CSS class to toggle on/off (e.g., active).
• Use case: Create a toggle interaction where clicking alternates between two visual states.

Attribute Manipulation (fire onStart)

Set Attribute

• Label: Set Attribute
• Parameters:
• Attribute (text) -- The HTML attribute name (e.g., data-state).
• Value (text) -- The attribute value (e.g., active).
• Use case: Drive CSS selectors or JavaScript logic by setting data-* attributes dynamically.

Remove Attribute

• Label: Remove Attribute
• Parameters:
• Attribute (text) -- The HTML attribute to remove (e.g., data-state).
• Use case: Clean up dynamic attributes when an interaction reverses.

Content (fire onStart)

Change Content

• Label: Change Content
• Parameters:
• Content (text) -- The new text or HTML content.
• As HTML (boolean, default off) -- When enabled, the content is inserted as raw HTML instead of plain text.
• Use case: Swap text labels, update counts, or inject HTML on interaction.

CSS Variables (fire onStart)

Set CSS Variable

• Label: Set CSS Variable
• Parameters:
• Variable (text) -- The CSS custom property name (e.g., --my-color).
• Value (text) -- The value to assign (e.g., red).
• Use case: Drive theme changes or computed styles via CSS custom properties.

Navigation & Events (fire onStart)

Trigger Event

• Label: Trigger Event
• Parameters:
• Event Name (text) -- A custom event name (e.g., custom-event).
• Use case: Dispatch a custom DOM event that other scripts or interactions can listen for.

Scroll To

• Label: Scroll To
• Parameters:
• Target (text) -- A CSS selector for the scroll target (e.g., #section-2).
• Behavior (select) -- Smooth or Instant.
• Position (select) -- Start, Center, or End.
• Use case: Create scroll-to-section navigation triggered by a click interaction.

Timeline Control (fire onStart)

Play Timeline

• Label: Play Timeline
• Parameters:
• Timeline ID (text) -- The ID of the timeline to play.
• Reversed (boolean, default off) -- Play the timeline in reverse.
• Use case: Trigger a timeline animation from a different element's click interaction.

Pause Timeline

• Label: Pause Timeline
• Parameters:
• Timeline ID (text) -- The ID of the timeline to pause.
• Use case: Add a pause button for a running timeline animation.

Text Effects (fire continuously onUpdate)

Text Scramble

• Label: Text Scramble
• Parameters:
• Target Text (text) -- The final text to reveal (e.g., Hello World).
• Speed (ms) (number, default 50) -- How fast characters resolve, in milliseconds.
• Scramble Chars (text, default !<>-_\/[]{}--=+*^?#) -- The set of random characters used during the scramble effect.
• Use case: Create a dramatic text reveal where random characters scramble and resolve into the target text. Works best on text elements triggered by Appear or Click interactions.

Counter

• Label: Counter
• Parameters:
• From (number, default 0) -- The starting number. Shown only in the "From" panel.
• To (number, default 100) -- The ending number. Shown only in the "To" panel.
• Separator (text, default ,) -- Thousands separator character.
• Decimals (number, default 0) -- Number of decimal places.
• Prefix (text) -- Text before the number (e.g., $).
• Suffix (text) -- Text after the number (e.g., %).
• Use case: Animate a number counting up (or down) inside a text element. The "From" and "To" panels each show the relevant parameter -- set the starting number in "From" and the ending number in "To."

SVG Actions (fire continuously onUpdate)

SVG Draw

• Label: SVG Draw
• Parameters: None (automatically draws the SVG path stroke).
• Use case: Animate an SVG path being drawn from 0% to 100%. Apply to an SVG element with a visible stroke. The stroke progressively appears as the animation plays.

SVG Morph

• Label: SVG Morph
• Parameters:
• Target Path (d) (text) -- The SVG path d attribute to morph into (e.g., M10 80 C...).
• Use case: Smoothly morph one SVG shape into another by transitioning the path data.

Motion Path (fire continuously onUpdate)

Follow Path

• Label: Follow Path
• Parameters:
• Path Selector (text) -- CSS selector for the SVG path to follow (e.g., #my-path).
• Auto Rotate (boolean, default on) -- Rotate the element to match the path direction.
• Start % (number, default 0) -- Where on the path to start.
• End % (number, default 100) -- Where on the path to end.
• Use case: Make an element travel along an SVG path during a scroll or appear animation.

Carousel Control (fire onStart)

Carousel Control

• Label: Carousel Control
• Parameters:
• Action (select) -- Next, Previous, or Go To.
• Slide Index (number, default 0) -- The target slide index (used with Go To).
• Use case: Create custom next/prev buttons or jump-to-slide navigation for a carousel.

Step-by-Step: Counter Animation on Scroll

1. Add a text element with the content 0.
2. In the Interact section, add an Appear interaction.
3. Open the From effect panel. Click Add Property and select Counter under Actions.
4. Set From to 0.
5. Go back and open the To effect panel. Click Add Property and select Counter under Actions.
6. Set To to 1000, Separator to ,, and Suffix to +.
7. The text element will animate from "0" to "1,000+" as it enters the viewport.

Step-by-Step: SVG Draw on Appear

1. Add or select an SVG element with a visible stroke.
2. In the Interact section, add an Appear interaction.
3. Open the From effect panel. Click Add Property and select SVG Draw under Actions.
4. That is all -- SVG Draw has no parameters. The stroke automatically animates from invisible to fully drawn.
5. Adjust the interaction's Transition (duration, easing) to control the drawing speed.

Removing an Action

Hover over any action row and click the trash icon that appears on the right side. The action is immediately removed from the effect configuration.

Tips

• Actions vs. Animations: Animations smoothly transition CSS values (opacity, transform, etc.). Actions perform discrete operations (add a class, change content, etc.). You can combine both in the same effect.
• onStart vs. onUpdate: Start actions fire once at the beginning of the animation. Update actions (Counter, Text Scramble, SVG Draw) interpolate based on animation progress -- they need a duration to work correctly.
• Counter "From" and "To" split: The counter action intelligently shows only the "From" parameter in the From panel and only the "To" parameter in the To panel. This matches the animation model where you define start and end states separately.
• Search is your friend: The Add Property popover has a search field. Type "scramble", "svg", or "class" to quickly filter to the action you need.
• Combine with transitions: After adding actions, click the Transition button in the effect panel to control timing. Update-driven actions like Counter respect the transition duration and easing curve.

Common Issues

Problem	Solution
Counter shows raw JSON instead of a number	Make sure you added the Counter action in both the From and To panels with the appropriate values.
SVG Draw does not animate	Ensure the element is an SVG with a visible stroke. Elements with only fill and no stroke will not show the draw effect.
Text Scramble finishes too fast	Increase the Speed (ms) parameter or extend the interaction's transition duration.
Class not applied after interaction	Verify the class name matches exactly (case-sensitive). Check that the class has styles defined in the Class Manager.
Action fires at wrong time	Check whether you placed the action in the "From" or "To" panel. Start actions fire when that state begins.

Related Articles

• Transitions & Easing -- Control timing and easing for action-driven animations.
• Timeline Editor -- Use timeline-based actions for precise sequencing.
• Text Split Animations -- Combine text scramble with split-text effects.
• Carousel Interaction -- Set up carousels and control them with actions.
• Element States -- Pair addClass/removeClass with state-based styling.