Animation PresetsNew

Presets in OB Kinekt are saved animation configurations that you can reuse across different pages and elements in your Bricks Builder website. Instead of recreating the same animation settings every time, you can save them as a preset and apply them instantly.

Core Methods

How Presets Work

🔶 Creating Your First Preset

  1. Edit any page with Bricks Builder
  2. Add or select an element (Heading, Text, Image, Container, etc.)
  3. Go to the Style tab and find the “OoohBoi Kinekt” panel
  4. Enable “Activate Kinekt?” and configure your animation:
    • Choose animation type (From-To, Text Effects, Image Effects, SVG Line Effects)
    • Set triggers, duration, easing, and other properties
    • Configure any specific settings for your chosen animation type
  5. Enter a Preset Name in the “Preset Name” field (at the very bottom of the panel)
  6. Save the page – your animation will be automatically saved as a preset

In order to be able to apply a newly created preset, you'll have to refresh Bricks builder. If you want to be sure that the preset was successfully created, go to WP Admin and choose OB Kinekt → Presets.

Managing Presets in WordPress Admin

🔶 Access your presets at: WordPress Admin → OB Kinekt → Presets

presets management in WP Admin

Column Name Description
Preset Name The name you gave your preset
Animation Type The type of animation (From-To, Text Effects, etc.)
Element Type The Bricks element type (heading, text, image, etc.)
Animation ID Unique system-generated ID for Timeline Controller
Created When the preset was first created
Updated Last time the preset was modified
Actions Export and Delete buttons

Animation ID Explained

Each preset has a unique Animation ID (format: preset_[randomstring]). This ID is crucial for:

  • Timeline Controller functionality
  • Export/Import compatibility
  • Animation targeting and control
Never manually change Animation IDs - they're automatically generated and maintained by the system.

Export and Import Presets

🔶 Exporting Presets

Export Single Preset

  1. Find the preset in the table
  2. Click the “Export” button
  3. The preset will download as a .json file

Export All Presets

  1. Click “Export All” in the Import/Export section
  2. All presets download as a single .json file

🔶 Importing Presets

Import Single or Multiple Presets

  1. Click “Choose File” in the Import section
  2. Select your .json file
  3. Click “Import”

Import Results

After import, you’ll see:

  • Added: New presets that were imported
  • Updated: Existing presets that were updated
  • Skipped: Presets that couldn’t be imported

Using Presets in Your Designs

🔶 Method 1: Load Existing Preset

  1. Add any element in Bricks Builder
  2. Go to Style tab → “OoohBoi Kinekt” panel
  3. Enable “Activate Kinekt?”
  4. Change Animation Type to “Preset”
  5. Select your preset from the dropdown
  6. The animation loads instantly!

🔶 Method 2: Timeline Controller

Use presets with the Timeline Controller for advanced animation control:

  1. Add a Timeline Controller element (almost any element can be a controller)
  2. Configure it to trigger your preset animations
  3. Set execution mode: Simultaneous or Sequential
  4. Choose trigger event: Click or Hover

❗️Element Type Awareness

Presets work best when used with matching element types:

  • Text presets → Heading, Text elements
  • Image presets → Image elements
  • Layout presets → Container, Section elements

❗️Preset Limitations

  • Presets drop-down not updated instantly – you need to refresh Bricks builder in order to use newly created preset
  • 50 preset limit – older presets are automatically cleaned up
  • Animation ID consistency – required for Timeline Controller — NOTE: A preset has only 1 uniquie animation ID
  • Element compatibility – some animations work better with specific element types