View transitions can blink or flash when the browser fails to correlate elements between old and new states. This happens when view-transition-name properties are missing, duplicated, or assigned at the wrong time. The solution requires assigning unique view-transition-name values before transitions start, performing true DOM manipulation instead of CSS visibility toggles, and cleaning up transition names after completion. A tabbed interface example demonstrates the broken pattern (using opacity to hide panels) versus the working solution (removing and creating DOM elements). Key principles include ensuring unique transition names, manipulating the DOM directly, using dynamic naming for conditional elements, and maintaining proper timing throughout the transition lifecycle.

12m read timeFrom piccalil.li
Post cover image
Table of contents
Beware, it blinks!A tabbed interface exampleUniversal principles for smooth transitionsA Practical implementation checklistWrapping upMiguel Pimentel

Sort: