view-timeline-inset
Allows you to offset the 'start' and 'end' points of a view-timeline. This is useful if you want an animation to start before an element is fully on screen (e.g., when it's 20% visible) or continue after it has partially left.
It is documented as part of the Scroll-driven Animations specification.
Syntax
/* Usage Example */
.reveal-section {
view-timeline-name: --reveal;
/* Starts the animation when the element is 20% into the scroll container */
view-timeline-inset: 20%;
}
/* Syntax */
view-timeline-inset: auto;
/* Global values */
view-timeline-inset: inherit;
view-timeline-inset: initial;
view-timeline-inset: revert;
view-timeline-inset: revert-layer;
view-timeline-inset: unset;view-timeline-inset Browser support
Limited availability
Since
2020 78% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
115+
115+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more