Settings

Settings can be accessed from the admin dashboard.

settings

Selectors

Selectors determine how you can target HTML elements for animations.

  • Class prefix: This field allows you to specify a prefix that will be added to your classes for animation selectors. For example, if you enter motion, you can target elements with a class that begins with motion-.

  • Data attribute: This field allows you to specify the data attribute used to trigger animations. For example, data-animate can be used in your HTML to define the animation sequence.

Breakpoints

Breakpoints allow you to define custom responsive animation thresholds. These are the screen widths at which your animations will adapt to ensure they look great on any device.

  • Default breakpoint: The default setting for responsive animations. It's set to (min-width: 1px), which means animations will always be active unless overridden by custom breakpoints.

  • Add breakpoint: This button allows you to add new breakpoints. When clicked, you can specify a custom min-width to target different screen sizes for your animations.

Defaults

Defaults define the initial settings for timelines and elements in your animations.

  • Timeline defaults: This option sets the default setting for your animations. For example, ease-power2.inOut applies an easing equation that starts slowly, accelerates in the middle, and slows down again towards the end.

  • Element defaults: This field sets default values for the properties of animated elements. For example, setting from:duration-1 ensures that all elements animate over a one-second duration unless specified otherwise.

Presets

Presets allow you to create predefined sets of animation properties that you can reuse across multiple elements.

  • Add preset: This button lets you define a new preset. For example, a helicopter preset with the value from:opacity-0|duration-3 would make elements start from transparent and fade in over three seconds while spinning like a helicopter blade.

Preview behavior

  • Enable SleekMotion inside page builder previews: This toggle switch allows you to preview the animations within your page builder before publishing the changes.

Filtering

You can filter settings using the sleekMotion/settings filter.

functions.php

            add_filter('sleekMotion/settings', function($settings) {
      $settings['breakpoints'][] = [
        'name'  => 'tablet',
        'value' => '(min-width: 768px)',
      ];

      return $settings;
    });

      
Copy