Class trigger
Learn how to trigger animations on class change
Overview
A .class trigger executes the animation when the class is added, removed or toggled on the element. The animation then starts to play in the normal direction from start to end. When the class is changed (for example removed), the animation switch to backward direction and will play from the current state back to the start.
Syntax
To activate the class trigger, use the .{class-name} syntax, starting with a dot . followed by the class name. A CSS property is animated when the element receives the .class-name.
Examples
These examples show the usage of the .class trigger in the various timeline types together with the combination with the different triggers.
Discrete timeline
Discrete timeline is the basic timeline that animate the property when the .activate class is added into the element.
Sequenced timeline
Sequenced timeline animates the CSS properties in the sequence of steps using the .activate class is added into the element.
Offset-based timeline
Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, triggered by adding the .activate class to element.
Combination
The .class trigger can be combined with any other available triggers.
Parameters
Trigger can be customized with the parameters that are defined within its parentheses ().
Target
The target parameter specifies the external element on the page where the current trigger is applied. This means you can define an animation that starts when a trigger on a different element is activated. A real-world example: clicking the hamburger menu button makes an off-screen sidebar appear.
Options
The id, class and attribute CSS selectors can be used.
| Name | Value | Default | Description |
|---|---|---|---|
target |
class | id | attribute |
null |
CSS selector |
Examples
In these examples, we’ll use a <p> as the target element where the .activate class is applied. This will then affect elements that reference <p> as their target parameter.
id selector
This examples shows how to use a target parameter with an id CSS selector defined by the #text. For better clarity, you can interpret it as: When the .activate class is added (triggered) on the #text target element, the scale(2) CSS property is animated.
| Value | Example | Shorthand |
|---|---|---|
#{id-name} |
.show(target: #navigation) |
.show(#navigation) |
Click this text
<!-- Actual element that will be scaled -->
<!-- Shorthand -->
class selector
This examples shows how to use a target parameter with a class CSS selector defined by the .{class-name}. For better clarity, you can interpret it as: When the .activate class is added (triggered) on the .text target element, the scale(2) CSS property is animated.
| Value | Example | Shorthand |
|---|---|---|
#{class-name} |
.activate(target: .navigation) |
.activate(.navigation) |
Click this text
<!-- Actual element that will be scaled -->
<!-- Shorthand -->
attribute selector
This examples shows how to use a target parameter with a attribute CSS selector defined by the [{attribute}]. For better clarity, you can interpret it as: When the .activate class is added (triggered) on the [data-animal="cat"] target element, the scale(2) CSS property is animated.
| Value | Example | Shorthand |
|---|---|---|
[{attribute}] |
.activate(target: [data-animal="cat"]) |
- |
Click this text
<!-- Actual element that will be scaled -->
<!-- No shorthand -->