Active trigger
Learn how to trigger animations on click and hold (active)
Overview
An active
trigger executes the animation when element is being activated with click and hold. This is similar to the :active CSS pseudo-class.
Syntax
To activate the active trigger, use the active
.
Examples
These examples show the usage of the active
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 properties when the active
trigger is executed on the element.
Sequenced timeline
Sequenced timeline animates the CSS properties in the sequence of steps using the active
trigger.
Offset-based timeline
Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, triggered by a active
action.
Combination
The active
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 id="text">
as the target element where the active
trigger is applied. This will then affect elements that reference #text
as their target
parameter.
For better clarity, you can interpret it as: When the active
trigger is activated on the #text
target element, the scale(2)
CSS property is animated.
id
selector
Value | Example | Shorthand |
---|---|---|
#{id-name} |
active(target: #navigation) |
active(#navigation) |
This examples shows how to use a target
parameter with an id CSS selector defined with the #{id}
.
Active this text
<!-- Actual element that will be scaled -->
<!-- Shorthand -->
class
selector
Value | Example | Shorthand |
---|---|---|
#{class-name} |
active(target: .navigation) |
active(.navigation) |
This examples shows how to use a target
parameter with a class CSS selector defined by the .{class-name}
.
Active 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}]
Value | Example | Shorthand |
---|---|---|
[{attribute}] |
active(target: [data-animal="cat"]) |
- |
Active this text
<!-- Actual element that will be scaled -->
<!-- No shorthand -->