visible()

1 while at least the threshold of the element intersects the viewport, else 0.

Syntax

visible(<threshold>?)

registry syntax: visible([threshold])

Parameters

threshold<number> from 0 to 1optional

Default 0.

Return value

1 or 0. 0 until the first observation.

Example

.card {  opacity: calc(0.2 + visible(0.3) * 0.8);  transition: opacity 400ms;}

Behavior

• One shared IntersectionObserver per threshold.

Supported contexts

• Any value.

Limitations

• For scroll progress rather than a visible/hidden state, use native scroll-driven animations.

Related