~/talk

Svelte in Motion

on YouTube 38m
Talkat Svelte Summit Spring 2022 · on Saturday, 2022-04-30· [web-animation, frontend-architecture]

speaker

name:Pngwn
x:evilpingwin

resources

video:https://youtu.be/Exd4nuSBooc
slides:none on file

summary

Builds a small Svelte image viewer and adds concrete motion: scroll-snap in two CSS lines to make carousels responsive, Svelte's built-in fly transition (x 500 → x -150, 250ms) for page changes, and a lightbox implemented with position:fixed, boundingClientRect, requestAnimationFrame and two springs for scale and opacity. Springs use stiffness 9.2 and set opacity to 0.95; animations run smoothly in production and remain cancelable for low-latency, native-feeling interaction.

AI-written summary · about

chapters (6)

  1. 0:00Introduction to motion
  2. 3:17The sample application
  3. 3:49CSS scroll snapping
  4. 7:13Svelte page transitions
  5. 11:28Advanced spring animations
  6. 37:12Conclusion and best practices

related talks

~/search
type to search 6,249 conferences, 138,987 speakers and 185,172 talks
~/help
cmdctrl k
search every conference, speaker and series
/
focus the filter search
h
home
c
conferences
s
speakers
e
series
t
light / dark — the status bar button does the same
?
this help
esc
close this, then clear every filter — or just the search, while you are typing in it

Ignored while you are typing. Pages without a filter rail have no search to focus.