Inview trigger

Animate CSS properties when elements become visible in the viewport

Overview

Triggering animation when scrolled into view is a powerful technique to enhance user engagement and create a more dynamic website experience. By using an inview trigger, you can execute animations when specific elements scroll into view. This can be used to create eye-catching effects, reveal hidden content, or guide users through your content. Here are some of the benefits of using trigger animation when scrolled into view:

  • Captures attention: Eye-catching animations can grab users’ attention and make your website more memorable.
  • Enhances storytelling: Animations can help to tell a story and create an immersive experience for your users.
  • Guides users: Animations can be used to guide users through your website and make it easier for them to find the information they’re looking for.

Syntax

To activate the inview trigger, use the inview keyword. A CSS property is animated when the fraction of element becomes visible in the viewport or by defining the start and end offset in the inview trigger offset parameters.

Examples

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

Sequenced timeline

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

Offset-based timeline

Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, executed by an inview trigger.

Combination

The inview 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.

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 inview 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 inview trigger is activated on the #text target element, the scale(2) CSS property is animated.

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

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

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

Make this text visible in the viewport



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

<!-- Shorthand -->
class selector
Name Value Example Shorthand
target #{class-name} inview(target: .navigation) inview(.navigation)

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

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

Make this text visible in the viewport



<!-- 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(attribute-name)

Name Value Example Shorthand
target attribute({attribute-name}) inview(target: attribute(data-animal="cat")) -
<!-- The "external" element with `data-animal="cat"` where the `inview` trigger is applied -->

Make this text visible in the viewport



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

<!-- No shorthand -->

Offset

The start and end offsets limits when the inview trigger should start or finish. The reference point of the offset parameter is at the bottom of the screen. So the 0% value is very bottom, 50% is the half and the 100% is the top of the screen. You can also use the absolute px values instead of relative percentage-based ones.

start offset

By default, the start offset is set to 0%, meaning the animation trigger point is positioned at the bottom of the screen. Adjusting this value allows you to modify when the animation starts, triggering the animation later as the element reaches the specified offset.

Name Value Default Example Shorthand
start {number}{% | px} 0% inview(start: 10%) inview(10%)
<!-- Start the animation when the element reaches `50%` from the bottom of the screen -->

<!-- Shorthand -->

<!-- Start the animation when the element reaches `100px` from the bottom of the screen -->

<!-- Shorthand -->
end offset

By default, the end offset is set to 100%, meaning the trigger point is at the top of the screen when the animation ends. Changing this value adjusts when the animation completes, causing the animation to end earlier as the element reaches the specified offset.

Name Value Example Default Shorthand
end {number}{% | px} 100% inview(end: 10%) -
<!-- Revert the animation when the element reaches `50%` from the bottom of the screen -->

<!-- Revert the animation when the element reaches `100px` from the bottom of the screen -->

<!-- No shorthand -->
Combination

You can also combine the start and end offsets to fine-tune when the animation is triggered and completed within the viewport.

<!-- Revert the animation when the element reaches `50%` from the bottom of the screen -->

<!-- Shorthand -->

<!-- Revert the animation when the element reaches `100px` from the bottom of the screen -->

<!-- Shorthand -->

Keep inview

The keep parameter prevents the trigger from reverting when leaving the viewport, ensuring that the property remains in its final state.

Name Value Example Default Shorthand
keep {true | false} false inview(keep: true) inview(keep)
<!-- Keep the property after leaving the viewport -->

<!-- Shorthand -->