---
title: "invalid-view-transition-variant"
description: "Reports a state or container variant in a style.viewTransition() definition."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# invalid-view-transition-variant

This rule reports a state or container variant, such as `hover:`, in a
`style.viewTransition()` definition. The snapshots are images of the page, not
the element itself, so they cannot be hovered. Only media and `supports-*`
variants can condition a snapshot style.

## Reported

```tsx
const transition = style.viewTransition({ old: "hover:opacity-0" });
style(transition.for("card"));
```

> invalid-view-transition-variant: view transition utilities accept only media and supports condition variants
> 
> Example:1:49

## Fixed

```tsx
declare const hovered: boolean;
const fade = style.viewTransition({ old: "opacity-0" });
const keep = style.viewTransition({ old: "opacity-100" });
style((hovered ? fade : keep).for("card"));
```

## How to fix

- To use a different transition depending on the state of the element, define
  one transition for each case and choose between them in JavaScript before the
  update, as in the example.
- To use a different transition for a media condition, such as reduced motion,
  keep the variant: `old: "motion-reduce:duration-0"`.

See [View transitions](/docs/guides/view-transitions).

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | deny |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/invalid-view-transition-variant/index.mdx