Comparison:

  • Svelte crossfade: Takes 2 elements, uses scaling and translate, and fades them through the animation (both of them are always the same size)
  • Old m3-svelte container transform: Based on crossfade, but instead of scaling it uses clip-path
  • New m3-svelte container transform: Kinda based on crossfade, maintains a background element and uses scaling, clip-path, and translate to transition the elements
  • Actual container transform: Fades the content through. Content is anchored at top center. The content is scaled as needed to match the smaller sides and clipped.
    For example if something that was already the full width was expanding, it would clip vertically. If it was skinnier but tall enough, it would scale to match heights and clip horizontally. If it was a FAB, it would scale to match widths and clip vertically.