Custom transitions in Svelte - Performance & Optimization

Performance: Custom transitions

MEDIUM IMPACT

Custom transitions affect the rendering speed and smoothness of animations during element entry and exit, impacting user interaction responsiveness and visual stability.

Animating element appearance with custom transitions

Svelte

import { cubicOut } from 'svelte/easing';

function simpleTransition(node, { duration }) {
  return {
    duration,
    css: t => `transform: translateX(${t * 100}px); opacity: ${t}`
  };
}

// Usage: <div transition:simpleTransition={{ duration: 300 }}>Content</div>

Simpler math reduces CPU usage and leverages GPU-accelerated transform and opacity properties for smooth animation.

📈 Performance GainNon-blocking animation; reduces CPU load by 70%; smooth 60fps on most devices

Animating element appearance with custom transitions

Svelte

import { cubicOut } from 'svelte/easing';

function heavyTransition(node, { duration }) {
  const start = performance.now();
  return {
    duration,
    css: t => {
      // Complex calculation on every frame
      const progress = Math.sin(t * Math.PI * 10) * 100;
      return `transform: translateX(${progress}px); opacity: ${t}`;
    }
  };
}

// Usage: <div transition:heavyTransition={{ duration: 1000 }}>Content</div>

The transition runs expensive math calculations on every frame causing CPU load and janky animations.

📉 Performance CostBlocks rendering for 50-100ms on low-end devices; triggers multiple style recalculations per frame

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy math in css function	Minimal (1 element)	Multiple per frame	High (layout-triggering)	[X] Bad
Simple transform and opacity	Minimal (1 element)	None	Low (GPU accelerated)	[OK] Good

Rendering Pipeline

Custom transitions update CSS properties frame-by-frame during animation. The browser recalculates styles, layouts if needed, paints pixels, and composites layers to show the animation.

→Style Calculation

→Paint

→Composite

⚠️ BottleneckStyle Calculation and Paint stages are most expensive if transitions use complex or layout-triggering properties.

Core Web Vital Affected

INP

Custom transitions affect the rendering speed and smoothness of animations during element entry and exit, impacting user interaction responsiveness and visual stability.

Optimization Tips

1Use transform and opacity properties in custom transitions for GPU acceleration.

2Avoid heavy calculations inside transition functions to reduce CPU load.

3Check animations in DevTools Performance panel to detect layout thrashing and jank.

Performance Quiz - 3 Questions

Which CSS properties are best to use in custom transitions for best performance?

A margin and padding

B transform and opacity

C width and height

D top and left

DevTools: Performance

How to check: Record a performance profile while triggering the transition. Look for long tasks or high CPU usage during animation frames.

What to look for: Check for frequent style recalculations and layout thrashing. Smooth animations show consistent frame times near 16ms.