Motion
Coordinate application transitions with Liquidify duration, easing, and interaction tokens.
Use the public duration and easing variables when application-owned transitions need to coordinate with Liquidify controls.
.details {
transition:
opacity var(--lq-duration-fast) var(--lq-easing-decelerate),
transform var(--lq-duration-fast) var(--lq-easing-decelerate);
}
.details[data-hidden="true"] {
opacity: 0;
transform: translateY(var(--lq-space-4));
}The duration family ranges from instant through lazy; easing includes standard, accelerating, decelerating, and spring-shaped curves. Interaction tokens such as hover scale, press scale, press clarity, and press duration are component-engine inputs.
Reduced motion
Motion must not be required to understand a state change. Disable application-owned transitions when the user requests reduced motion.
@media (prefers-reduced-motion: reduce) {
.details {
transition: none;
}
}For coordinated spring work outside the component package, see @liquidify/motion.