Check trigger

Trigger the animations on checkbox change

Overview

A check trigger executes the animation when the <input type="checkbox"> or <input type="radio"> element is checked. The animation then starts to play in the normal direction from start to end. When the element is unchecked, the animation switch to backward direction and will play from the current state back to the start.

Syntax

To activate the check trigger, use the check. A CSS property is animated when the element receives the checked state.

Checkbox

Radio buttons

If you have multiple radio button group, make sure that all radios use the same name attribute

Examples

These examples show the usage of the check 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 check trigger is executed on the element.

Checkbox

Radio buttons


Sequenced timeline

Sequenced timeline animates the CSS properties in the sequence of steps using the check trigger.

Checkbox

Radio buttons


Offset-based timeline

Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, triggered by a check action.

Checkbox

Radio buttons


Combination

The check 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 <input id="example" type="checkbox"> as the target element where the check 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 check trigger is activated on the #text target element, the scale(2) CSS property is animated.

id selector
Value Example Shorthand
#{id-name} check(target: #navigation) check(#navigation)

This examples shows how to use a target parameter with an id CSS selector defined with the #{id}.

Checkbox

<!-- The "external" element with `id="check_id"` where the `check` trigger is applied -->

<!-- Actual element that will be scaled -->

<!-- Shorthand -->

Radio button

<!-- The "external" elements with `id` where the `check` trigger is applied -->


<!-- Actual elements that will be animated -->
class selector
Value Example Shorthand
#{class-name} check(target: .navigation) check(.navigation)

This examples shows how to use a target parameter with a class CSS selector defined by the .{class-name}.

Checkbox

<!-- The "external" element with `class="check_class"` where the `check` trigger is applied -->

<!-- Actual element that will be scaled -->

<!-- Shorthand -->

Radio button

<!-- The "external" elements with `class="radio-class"` where the `check` trigger is applied -->


<!-- Actual elements that will be animated -->
attribute selector

This examples shows how to use a target parameter with a attribute CSS selector defined by the [{attribute}]

Value Example Shorthand
[{attribute}] check(target: [data-animal="cat"]) -

Checkbox

<!-- The "external" element with `data-example="check_attr"` where the `check` trigger is applied -->

<!-- Actual element that will be scaled -->

<!-- No shorthand -->

Radio button

<!-- The "external" elements with ``data-example="radio-attr"` where the `check` trigger is applied -->


<!-- Actual elements that will be animated -->