Modern Web Animations

Learn when to use the Web Animations API for dynamic, interactive animations controlled with JavaScript. Compare CSS for simple tasks and this API for playback control, duration, and smooth reverse.

Explore the Web Animations API by understanding the timing model and animation model, including the timeline, current time, and how animation objects and effects describe start, duration, and keyframes.

Learn to create a first web animation with the Web Animations API by defining a keyframe effect, timeline, and animation object, then use the element.animate shortcut for playback.

Learn the second approach to defining keyframes in the Web Animations API using an object-based keyframes, including offset, easing, and composite, and compare it with the first array-based method.

Demonstrate how the Web Animations API iteration composite builds on previous iterations, accumulating values rather than replacing them, and compare it to the CSS animation composition concept.

Learn to control web animations with an animation object, using play, pause, reverse, cancel, and finish buttons, plus a playback rate slider for smooth, infinite iterations.

Update the keyframe effect with update timing to adjust duration and iterations, including infinity, by accessing the effect from the animation and applying new keyframes.

Discover how to query animation properties such as current time, start time, playback rate, and timing via get timing and get computed timing, then reflect them in ui controls.

Discover how to read and set an animation's current time, and how delay, duration, and iterations shape playback across its timeline.

Learn how current time and start time steer an animation along its timeline, including starting points, delays, negative values, and positioning after page load.

Explore how play state tracks animation status—running, paused, idle, finished—and how the pending property signals asynchronous waiting and how the ready promise resolves.

Explore how to coordinate animations with the finished promise and finish and cancel events, using await and event listeners to run code after an animation ends.

Demonstrate the Web Animations API to get all animations in the document or an element's subtree, show css and javascript animations, and adjust playback rate for accessibility with speed controls.

Discover commit styles to improve animation performance by writing computed styles into the element, using them with fill forwards or fill both, and canceling afterward to avoid memory use.

Learn how browsers automatically remove stale animations to prevent memory leaks, and how to manage with the persist method, replaceState, and remove events to track active versus removed animations.

Recreate the earlier CSS animation using the Web Animations API in JavaScript, gaining more control and adding a car animation; review exercise one and start exercise two with starter code.

Animate a running character using a sprite sheet with multiple frames and step keyframes via the web animation API, prevent repeated jumps, and synchronize jump completion with the running animation.

Animate street, background, and foreground with CSS keyframes and JavaScript, translating x positions. Use 12‑second linear infinite timing and getComputedTiming to sync speeds, with arrow keys and space to control.

Implement a toggle play state to pause or play all animations via document.getAnimations, enable space to pause, and prevent jumping while paused so the entire scene stops.

Adjust the playback rate to speed up or slow down all animations, including character and scenery, using run faster and run slower with arrow keys, bounded by 0.8 and 3.

Add a centered shadow div under the character on the ground and animate its scale to follow the jump, syncing duration, iterations, and easing with the jump animation.

Add a randomly appearing car with animated wheels to the scene, style the car in index.html, and dynamically generate, animate, and remove cars using JavaScript with random speeds.

Randomize car speed with math.random for durations between 200ms and 4.2s, spawn cars at random delays during street animation, ensure one car, and exclude its animation from global speed changes.

Animate the car wheels by rotating the after and before pseudo elements with infinite linear keyframes, adjusting duration to car speed, and looping for front and back wheels in Firefox.

Learn to drive animation progress with the scroll progress timeline and the view progress timeline, shifting from time-based timelines to scroll-based 0% to 100% progress in a practical demo.

Utilize named scroll progress timelines to drive animations by scroll position, not time, by linking a container's scroll timeline to a descendant's animation and applying easing.

Explore anonymous scroll timelines using the scroll function to animate elements, compare with named timelines, and control with nearest, root, self, and axis options.

Learn to customize a scroll-based animation with animation range, starting at 20% and ending at 80% of the scroll timeline, including pixel values and fill-mode behavior.

Learn to use named scroll timelines and the timeline scope property to extend a container's animation to elements outside the container, enabling cross-container animation control.

discover how the view progress timeline triggers a progress animation as elements enter and exit our view, using timeline scope, animation range, and keyframes to control progress and background changes.

Learn how to use view timeline inset to shift start and end edges of scroll-based animations, controlling when progress begins and ends with percent, pixels, or auto values.

Use anonymous view timelines to drive the progress inner div, controlling start and end with visibility, and switch to a named timeline for container animations with axis and insets.

Learn how named timeline ranges customize animation using the view progress timeline, including contain, entry, exit, and crossing variants with start and end, insets, and pixel or percentage inputs.

Create scroll-based timelines with the web animations API, animating a container’s background color as you scroll, with range controls at 30% and 70%, and cross-binding from another container.

Create view progress timelines using the Web Animations API to animate a progress bar with a view timeline, including axis, subject element, insets, and named ranges like cover.

Explore a practical exercise that builds scroll based animations entirely with CSS, including full-screen videos, text fade transitions, polygon edges, and horizontal team member reveals.

Animate an svg logo path using stroke dasharray and dashoffset to create a drawing effect, driven by a draw logo keyframe, and loop by toggling the animate class with JavaScript.

Explore a scroll-based header animation that reveals a colored, shorter navigation as you scroll. Set up view timelines, extend scope to the body, and use exit crossing ranges.

Extend the hero section height and keep the inner video sticky to enable scroll-driven animations. Animate clip-path, saturation, and border padding, plus back-video opacity and scale for a dynamic hero.

Animate the hero text with scroll-triggered opacity, scale, and rotation, sequencing two titles using exit crossing timeline and display toggling for a smooth one-at-a-time reveal.

Animate the features section with 3d card rotations, perspective, and staggered timing using CSS variables, keyframes, and a scroll-triggered view timeline.

Learn to build a scroll-driven team section with a sticky panel and a horizontally translating grid. Implement neon logo animation, background color changes, and entry animations for titles and cards.

Animate the team section logo with a neon flicker and a scroll-driven drawing of the logo's stroke, using a time-based and a scroll-based timeline from contain 0% to contain 20%.

Animate the services section by stacking cards with sticky positioning, scaling the right image on scroll, and rotating borders, using per-card variables and timeline animations.

Animate stacked cards with rotation, scale, and border changes; introduce image animation on appearance, staggered card exit by timeline quarters, adjust transform origin and blur, and address reduced motion accessibility.

Respect user motion preferences by using a prefers-reduced-motion media query in CSS and JavaScript to disable animations and pause videos, with an optional manual toggle.

Learn to handle browser compatibility for scroll-based animations by using view timeline, prefers-reduced-motion, and fallbacks to keep hero content visible.

Explore view transitions, a css feature that animates changes between dom states in a demo app, and learn how to implement them with javascript, for potential single page app navigation.

Explore the view transitions API by wrapping DOM updates in start view transition to create crossfade animations between old and new states, using pseudo elements and CSS, with graceful fallbacks.

Learn how the view transitions api yields a default crossfade and how to override it with custom css, including slide out/in keyframes and element isolation.

Isolate elements for more control over transitions by using view transition names and groups, enabling header crossfades alongside sliding content in modern web animations.

isolate the sidebar using a view transition name, control root versus isolated animations, and toggle view transition names with JavaScript to manage grid and header transitions.

Learn to start a view transition with document.startViewTransition, manage its ready, update callback, and finished promises, update the DOM, and handle errors and skip the transition.

Learn to use view transition promises to scroll an item into view after the DOM updates, using update and finished promises to coordinate scrolling with transitions.

Animate a thumbnail to a large image using view transition names, swapping old and new states, and updating the DOM, while disabling crossfade and using object-fit: cover.

Fix thumbnail-to-large-image transitions by managing view transition names, removing them after transitions, and enabling a reverse animation from the large image back to the thumbnail.

Assign each grid item a unique view transition name to enable smooth movement between grid and expanded views, and clear names when needed to prevent crossfade flicker.

Detect and honor users' reduced-motion preference using the prefers-reduced-motion media query, turning off or reducing animations for groups, crossfades, and state changes, with mobile and desktop adjustments.

Create a JavaScript-driven animation for view transition pseudo elements using the Web Animations API, computing clip-path from element position with getBoundingClientRect, and fallback crossfade on back navigation.

Explore the view transitions API through a words game exercise, animating letter selections, score updates, and life changes while wrapping DOM updates in start view transition.

Animate the letters in the words game using start view transition, disable crossfade, and assign unique view transition names so letters move to their guess or pop out.

Learn to handle duplicate letters in word animations by giving each letter a unique view transition name per occurrence, duplicating keyboard buttons, and using clones for smooth moves.

Animate the modal's entrance and exit by setting a view transition name, wrapping DOM updates in start view transition, and using scale in/out and opacity keyframes for the modal.

Explore using the View Transitions API with React and Svelte, forcing immediate DOM updates with flushSync or awaiting tick, and assigning unique view transition names to animate items between lists.

Explore how the View Transitions API enables smooth page navigation in single-page apps by capturing old and new DOM states during updates, with examples across React and SvelteKit.

Explore how to implement the View Transitions API in a SvelteKit single-page app, detailing routes, a data array, and a skeleton layout with a back button and per-page styles.

Explore using SvelteKit's onNavigate to initialize view transitions between routes, suspend navigation with a promise, and capture the old and new dom states for smooth crossfade animations.

Animate image transitions between pages using unique view transition IDs in SvelteKit, control crossfade with styles, and tune image aspect ratios for a seamless navigation animation.

Demonstrate mobile transitions in a SvelteKit app by disabling image animations on screens, adding slide animations, isolating the header, and handling back navigation with a back class, considering reduced motion.

Master cross-document view transitions in multi-document applications by enabling navigation auto, leveraging page swap and page reveal events, and animating between documents with the view transition object.

Explore cross-document view transitions in a multi-document app, animating a thumbnail to its expanded image via view transition names, URL parsing, and page swap and reveal events.