# General
SleekMotion is a WordPress plugin which allows you to create animations without writing complex code. Instead, animations are created using a concise syntax inside of CSS classes. This makes it very easy to maintain animations since they are directly tied to the HTML elements they animate. On top of that, animations can easily be shared and copied between pages or projects.
---
# Activating
SleekMotion can be activated on a site by navigating to the `SleekMotion` menu item in the WordPress admin dashboard.
Alternatively, it is also possible to activate SleekMotion using PHP. This is done by adding the following code constant to your `functions.php` file:
```php
const SLEEKMOTION_LICENSE = "YOUR LICENSE KEY";
```
---
# Settings - Options
Settings can be accessed from the admin dashboard.
 ## 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.
```php
add_filter('sleekMotion/settings', function ($settings) {
$settings['breakpoints'][] = [
'name' => 'tablet',
'value' => '(min-width: 768px)',
];
return $settings;
});
```
---
# Settings - License
The License section is where you activate your plugin by entering your license key. A valid license ensures you receive automatic updates and have access to all premium features.
## Adding Your License Key
1. Enter your license key in the provided field
1. Click the "Set Key" button to validate and activate your license
Once activated, your license key will be securely stored and automatically validate your installation for updates.
## License Status
After entering your key, the system will automatically verify its validity.
---
# Usage - Syntax
The syntax of SleekMotion is straightforward and easy to understand. If you're familiar with Tailwind, you'll find Glaze's approach very similar.
Animation strings are defined in the following order:
1. **Breakpoint** (optional)
2. **Selector** (optional)
3. **State** (required)
4. **Animation object** (required)
## Class or attribute
You can define animations using either a data attribute or a class. Since some page builders don't render custom attributes inside the preview (e.g., Bricks), it is up to you to decide which method to use.
```html
```
It is possible to change the data attribute or class prefix inside the [settings](https://fabrikat.local/sleek/motion/documentation/settings#selectors).
## Breakpoints
Breakpoints allow you to specify when an animation should run, based on the breakpoints defined in the configuration. The breakpoint is defined using the `@` symbol, followed by the breakpoint name.
```html
```
## Selectors
By default, animations are applied directly to the element itself. However, you can target other elements using selectors enclosed in brackets (`[]`) before the state.
```html
...
...
...
```
The `&` symbol refers to the parent element, allowing you to specify a child selector.
With media queries:
```html
...
...
...
```
## State
The animation state indicates the beginning and end points of the animation:
- **from**: The initial state of the animation.
- **to**: The final state of the animation.
```html
```
If both states are defined, the animation will run from the initial state to the final state.
```html
```
## Animation object
The animation object specifies the properties to animate, following the state.
```html
```
The string is parsed by splitting at the dash (`-`), where the first part is the property name, and the second part is its value. Values are automatically converted to their appropriate type (`string`, `number`, or `boolean`).
### Chaining properties
To combine multiple properties in a single animation, separate them with a pipe (`|`) character.
```html
```
### Nested objects
Access nested object properties by separating keys with a dot (`.`) character.
```html
```
### Negative values
For negative values, enclose the value in brackets. (`[]`)
```html
```
### Spaces
For values with spaces, use an underscore (`_`) character.
```html
```
---
# Usage - Properties
Since SleekMotion is based on [GSAP](https://gsap.com/), it supports all properties that GSAP does. Below are some common properties that you'll most likely use when animating an element.
## CSS
Any CSS property can be animated, however, keep in mind that `camelCase` has to be used for all CSS values. For example, to animate the `background-color` property, you would use `backgroundColor` instead.
```html
```
## Duration
The duration of an animation can be set using the `duration` attribute. The value is in seconds.
```html
```
## Ease
The ease of an animation can be set using the `ease` attribute. The value is a string that represents the ease type.
```html
```
For a list of all available ease types, see the [GSAP documentation](https://greensock.com/docs/v3/Eases).
---
# Usage - Breakpoints
## Setup
To use breakpoints, you need to define them inside the [settings](https://fabrikat.local/sleek/motion/documentation/settings#breakpoints).
The `default breakpoint` will be used if no other breakpoint is defined. If no default is set in the settings, `(min-width: 1px)` will be used, which means the animation will always be applied.
## Usage
For the following examples, let's assume that three breakpoints are defined in the settings:
- `sm` with a value of `(min-width: 640px)`
- `md` with a value of `(min-width: 768px)`
- `lg` with a value of `(min-width: 1024px)`
Breakpoints are defined at the start of the animation string.
```html
```
This will animate all the set properties when the screen width is 640px or more.
You can also define multiple breakpoints:
```html
```
In this example, the animation will be applied when the screen width is `768px` or more. If the screen width is `1024px` or more, the background color will change in addition to the other animations.
---
# Usage - Timelines
## Usage
Start with the `tl` keyword inside the data attribute to establish a timeline. Glaze then treats the following strings as configuration options for this timeline.
```html
...
```
This example initiates a timeline with specified default `easing`, `duration`, and `yoyo` properties.
## Elements
By design, Glaze incorporates all child elements of a timeline-declared element into the timeline's scope, eliminating the need for explicit inclusion.
```html
```
Adjust timing for individual elements using the `tl:` prefix to delay or advance their animation start times within the timeline.
## Responsive timelines
Leverage media queries to control timeline execution. The example below demonstrates a timeline that activates at the `lg` breakpoint and adjusts individual element animations responsively.
```html
```
This approach ensures the timeline and its component animations adapt to varying screen sizes.
## Hooking into a timeline
Assign a name to your timeline to link animations from external elements, thereby extending the timeline's scope beyond its original container.
In the example below, the named timeline (`main`) allows for animations defined on other elements to join the timeline using the `tl:{name}` syntax.
```html
```
---
# Usage - ScrollTrigger
## Setup
There is no special syntax needed to use [ScrollTrigger](https://gsap.com/docs/v3/Plugins/ScrollTrigger/) with Glaze. Since it is defined inside the `scrollTrigger` property of the animation object, dot notation can be used to adjust its settings.
```html
```
In the example above, the `scrollTrigger` property is set to the current element by using the `&` symbol. This means that the animation will start when the element comes into view.
## Nested properties
Since the `scrollTrigger` property is a nested object, it is possible to use dot notation to adjust its settings.
```html
```
---
# Usage - Defaults
## Setup
To use defaults, you need to define them inside the [settings](https://fabrikat.local/sleek/motion/documentation/settings#defaults).
## Usage
There is no usage! Once you define the defaults, they will be used automatically for either timelines or elements.
## ScrollTrigger
Defaults are great for applying scroll triggers to all elements. For example, to make sure every animation will start when the user scrolls down to the element, simply add the following configuration to the timeline defaults.
```html
scrollTrigger:trigger-[&]|scrub-true
```
## Note on timelines
Glaze creates a new timeline for each element by default, even if not marked with `tl`. This means that the `tl` defaults option is perfect for applying global defaults to all timelines and elements. (ScrollTrigger, ease etc.)
---
# Usage - Presets
## Setup
To use presets, you need to define them inside the [settings](https://fabrikat.local/sleek/motion/documentation/settings#presets).
## Usage
For demonstration purposes, we will use a preset called `helicopter`. All you have to do is add the class `preset` followed by the preset name to the element you want to animate.
```html
...
```
---
# Hooks - PHP
Below you'll find a list of all available PHP hooks that can be used to extend or adjust the functionality of the plugin.
## settings
This filter allows you to adjust the settings of the plugin.
```php
add_filter('sleekMotion/settings', function ($settings) {
$settings['breakpoints'][] = [
'name' => 'tablet',
'value' => '(min-width: 768px)',
];
return $settings;
});
```
---