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.

Practice

1. What is the main purpose of a custom transition in Svelte?

easy

A. To create unique animations when elements enter or leave the page

B. To fetch data from an API

C. To manage component state

D. To handle user input events

Solution

1. Step 1: Understand what transitions do in Svelte

   Transitions animate elements as they appear or disappear from the DOM.

2. Step 2: Identify the role of custom transitions

   Custom transitions let you define your own animation styles for these changes.

3. Final Answer:

   To create unique animations when elements enter or leave the page -> Option A

4. Quick Check:

   Custom transitions = unique enter/leave animations [OK]

Hint: Custom transitions animate element entry/exit smoothly [OK]

Common Mistakes:

• Confusing transitions with data fetching
• Thinking transitions manage state
• Mixing transitions with event handling

2. Which of the following is the correct way to define a custom transition function in Svelte?

easy

A. function fade(node) { return { delay: 300, css: t => `opacity: ${t}` }; }

B. function fade(params) { return { duration: 300, css: t => `opacity: ${t}` }; }

C. function fade() { return { duration: 300, css: t => `opacity: ${t}` }; }

D. function fade(node, params) { return { duration: 300, css: t => `opacity: ${t}` }; }

Solution

1. Step 1: Recall the custom transition function signature

   It must accept node and optionally params.

2. Step 2: Check the returned object structure

   The object should include duration and a css function using t for progress.

3. Final Answer:

   function fade(node, params) { return { duration: 300, css: t => `opacity: ${t}` }; } -> Option D

4. Quick Check:

   Function(node, params) + {duration, css} = C [OK]

Hint: Custom transition needs node param and returns duration + css [OK]

Common Mistakes:

• Omitting the node parameter
• Returning delay instead of duration
• Not using a css function with progress t

3. Given this custom transition function:

function slide(node) {
  return {
    duration: 400,
    css: t => `transform: translateX(${(1 - t) * 100}%)`
  };
}

What happens to the element when it enters the DOM using transition:slide?

medium

A. It fades in with increasing opacity

B. It slides out to the right when leaving

C. It slides in from the right to its original position

D. It instantly appears without animation

Solution

1. Step 1: Analyze the css function for entry

   The transform moves from translateX(100%) at t=0 to translateX(0%) at t=1.

2. Step 2: Understand the visual effect

   The element starts off-screen right (100%) and slides left to original place (0%).

3. Final Answer:

   It slides in from the right to its original position -> Option C

4. Quick Check:

   translateX from 100% to 0% = slide in right to left [OK]

Hint: Check transform values at t=0 and t=1 for motion direction [OK]

Common Mistakes:

• Confusing enter and leave animations
• Assuming opacity changes instead of transform
• Thinking it slides out instead of in

4. This custom transition code causes an error:

function grow(node) {
  return {
    duration: 500,
    css: t => `scale(${t})`
  };
}

What is the error and how to fix it?

medium

A. Missing 'transform:' prefix in css string; fix by returning `transform: scale(${t})`

B. Duration must be a string; fix by changing 500 to '500ms'

C. Function must return a number, not a string; fix by removing css

D. Node parameter is unused; fix by removing it

Solution

1. Step 1: Identify the CSS syntax error

   The css string lacks the CSS property name; 'scale' alone is invalid.

2. Step 2: Correct the CSS string

   It should be 'transform: scale(...)' to apply scaling properly.

3. Final Answer:

   Missing 'transform:' prefix in css string; fix by returning `transform: scale(${t})` -> Option A

4. Quick Check:

   CSS property needed before scale() [OK]

Hint: CSS string must include property name like 'transform:' [OK]

Common Mistakes:

• Returning only scale() without 'transform:'
• Using wrong duration type
• Removing needed node parameter

5. You want a custom transition that fades in and grows an element from half size to full size over 600ms. Which function correctly implements this?

hard

A. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${1 - t}; transform: scale(${t})` }; }

B. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; }

C. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${t / 2})` }; }

D. function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${1 - t})` }; }

Solution

1. Step 1: Understand the fade and grow requirements

   Opacity should go from 0 to 1 (fade in), scale from 0.5 to 1 (grow).

2. Step 2: Check each option's css function

   function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; } uses opacity = t (0 to 1) and scale = 0.5 + 0.5 * t (0.5 to 1), matching requirements.

3. Final Answer:

   function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; } -> Option B

4. Quick Check:

   Opacity 0->1 and scale 0.5->1 = function fadeGrow(node) { return { duration: 600, css: t => `opacity: ${t}; transform: scale(${0.5 + 0.5 * t})` }; } [OK]

Hint: Map t from 0-1 to desired opacity and scale ranges [OK]

Common Mistakes:

• Reversing opacity or scale ranges
• Using scale starting at 0 instead of 0.5
• Mixing up increasing and decreasing values