About this article
This article was created using an automated generation workflow leveraging generative AI. Based on MDN documentation for the Web Animations API and reduced-motion settings, we built an interactive tutorial featuring a fictitious luggage card. The screen uses the same quote-box layout as standard articles.Verification Status: 📘 Official documentation and GitHub source verified / Browser runtime unverified
As of October 31, 2026, Daily Code's HTML, JavaScript, and README were saved and read back within the same Git commit. Browser rendering, user interactions, GitHub Pages deployment, actual display in WordPress blue boxes, and Node.js syntax checks have not been performed.
Animations are not a "set-and-forget" feature. When you can control playback, pausing, resuming, and speed adjustment, users gain the ability to choose how the UI moves. In this article, we willwithout adding any external librariesanimate the luggage card using only native browser APIs.
- What You Can Do This Time
- Try first: Move the luggage card
- Why animations can be controlled via JavaScript
- Try changing one thing: Duration of movement
- Respect reduced motion settings
- Running it on your own PC
- Troubleshooting
- How to use it in work and study?
- Compare playback state and speed separately
- Official and Primary Sources
- GitHub Sample
What You Can Do This Time
| Item | Description |
|---|---|
| Target | Supported browsers on desktop and mobile. Device-specific variances unverified. |
| Technology | Web Animations API (Element.animate()、Animation） |
| Cost & Network | No paid APIs, external CDNs, or logins required. Accessing the public page inherently involves network traffic. |
| Inputs | Play, pause, and reset buttons, along with speed selection |
| Data | A mock luggage card in the browser. No location or authentication information is used. |
| Important condition | Display statically if the OS "Reduce Motion" setting is enabled |
Try first: Move the luggage card
🔷 Let's interact
📦 Open Web Animations API demo (publicly deployed, browser behavior unverified)
📘 Full source and README
On the demo screen,"Play"Press . Observe whether the luggage moves back and forth horizontally.
Change the speed from "1x" to "2x"and compare the motion speed.
Press "Pause" -> "Reset"and view the card position and status display.
This is theexpected resultderived from the code and is not the result actually verified in the browser.
| Action | Expected change |
|---|---|
| Initial display | The card stops at the left edge. Status is "Ready" |
| Play | The card moves back and forth, and the status field changes to "Playing" |
| 2x Speed | Moves across the same range faster |
| Pause | Movement stops at the current position |
| Reset | Returns to the left edge and stops |
| Reduce motion setting | Switches to static display and playback controls are disabled |
🟦 Check here: Verify not only the motion but also the text display
Even for animations that look like videos, displaying the current state as text allows you to verify the meaning of the operation regardless of visual appearance or device differences. If the screen becomes static, please first check the guidance in the status field.
Why animations can be controlled via JavaScript
Standard CSS animations alone can move visuals. However, for operations like stopping midway, resuming, or changing speed, it is easier to understand when you retain the object returned by the browserAnimationholding the object.
Element.animate()applies keyframes to the element, starts playback immediately, and returns an object to control that animation. Therefore, in the learning material,immediately after creationpause()to prevent autoplay and only when the user presses "Play"play()Call.
play()is play/resume,pause()is pause,cancel()is cancel effect.updatePlaybackRate()is used to change the speed while maintaining consistency with the playback position. However, the visual appearance may vary depending on the browser implementation and device performance.
flowchart LR
A["再生ボタン"] --> B["Animation.play()"]
B --> C["カードが移動"]
D["速度選択"] --> E["updatePlaybackRate()"]
E --> C
F["一時停止"] --> G["Animation.pause()"]
G --> H["状態を文字表示"]
The diagram is a conceptual illustration explaining the relationship between events and APIs. It does not necessarily reflect the internal browser implementation.
The core of the code is here
const animation = parcel.animate(
[{ transform: "translateX(0px)" },
{ transform: "translateX(200px)" }],
{ duration: 2600, iterations: Infinity, direction: "alternate" }
);
animation.pause(); // ボタンを押すまで再生しない
// 操作時に animation.play() / animation.updatePlaybackRate(2)
This is asnippetfor understanding. In the complete code, the travel distance is calculated from the screen width, DOM elements are fetched, events are registered, and guidance for exceptional environments is provided. If running standalone, useDaily Code HTMLandJavaScript core.
Try changing one thing: Duration of movement
🧪 Predict before experimenting
By changing the JavaScriptduration: 2600toduration: 1300, you can expect it to cover the same travel distance in about half the time. Compare this with the speed selection kept at 1x. After comparison, revert it back to 2600.
What is important here is that "halving the duration" and "doubling the playback rate" yield similar speed results in this simple round-trip example. However, the former is the designed duration of the animation itself, while the latter is a multiplier that can be changed during playback. In production UIs, managing the speed chosen by the user separately from the standard duration set by the creator makes explanations much clearer.
Additionally, specifying a fixed 200px movement on narrow screens may cause cards to overflow. The final version calculates the travel distance based on the rail width and the card width. When the screen size changes, the old animation iscancel()cleared and recreated from the initial position. We will also explain as part of the tutorial specifications that this might look like a sudden reset.
Respect reduced motion settings
⚠️ For users who are sensitive to motion
When the device setting forprefers-reduced-motion: reduceis enabled, motion effects are not started, and text instructions are displayed instead. We do not automatically override the user's preference to stop motion.
Animations are not necessarily essential for understanding the content. Design the application so that states like "Ready", "Playing", and "Stopped" are conveyed even if moving cards are not visible. There is no need to use continuous flashing or effects that the user cannot stop. This demo does not play the moment the page is opened.
Running it on your own PC
If the live demo does not appear, save the pinned commit'sindex.htmlandapp.jsto the same folder, and first open the HTML in a browser. It is structured so that relative paths./app.jsare referenced.
If you encounter issues with local files, you can start a local HTTP server in that folder.
python3 -m http.server 8000 --bind 127.0.0.1
If the Python Launcher is available on Windows, you can also usepy -3 -m http.server 8000 --bind 127.0.0.1. In the browser, openhttp://127.0.0.1:8000/and pressCtrl+Cin the terminal to exit. No external deployment settings or administrator privileges are required.
Troubleshooting
| Symptom | First thing to check |
|---|---|
| Stuck on "Loading" | app.jsidentical folder structure and Console errors |
| No movement | OS motion reduction settings and status field |
| Shows "Not supported" | Browser andElement.animate()compatibility |
| Jumps back to the left after resizing | Intentional reset to recalculate the width |
| Cannot tell the speed difference | First, compare 1x and 2x speeds from the same starting position |
A pause does not mean the video file has stopped; rather, it is a state where the animation progress managed by the browser is halted. Do not treat loading failures, stops caused by user settings, and code exceptions as the same root cause.
How to use it in work and study?
This can be applied when you want to visually indicate processing progress as a task card moves to the next step. However, the movement of the cardis not proof that the server-side processing succeeded. In actual business tools, API response handling, retries on failure, update cancellations, and text notifications to the user are designed separately.
Furthermore, standard APIs and external libraries like GSAP are not mutually exclusive. Basic playback control for a single element, such as in this case, is easy to learn using standard APIs, while libraries are useful depending on requirements for complex multi-element effects or production environments. You can also choose to start with standard APIs if you want to minimize dependencies.
Compare playback state and speed separately
When the playback speed is doubled, it is expected to cover the same moving distance in a shorter time. However, an animation retains not only the card position but also the current playback time and playback state. The action of resuming after a pause yields a different result than starting over from the beginning. Observe the displayed state and compare whether playback continues from the stop position or returns to the initial position.
When setting the playback rate to 0 using the Web Animations API, the internal state does not necessarily become paused just because the visual movement stops. Distinguishing this from calling pause() via a stop button makes it easier to troubleshoot why the button display and motion do not match. When checking, observe playState and playbackRate separately, and avoid concluding that processing has finished simply because no movement is visible.
If the playback position jumps unnaturally when the speed is changed midway, check the method used for the speed modification. Although the API provides updatePlaybackRate() which accounts for playback position synchronization, reading the value immediately after the change may be insufficient for verification due to asynchronous processing. Verify which method the tutorial implementation uses, and isolate whether the speed changes while maintaining the current position or whether the new speed takes effect upon resumption.
In environments with slow browser rendering, cards may not appear smooth even when the same speed is set. In this case, rather than blindly increasing the playback speed value, check whether any errors appear in the developer tools and observe how the playback position changes when switching tabs. Because background constraints also have an impact, slow rendering and misconfigured animation duration settings are separate issues.
If settings that reduce screen motion are enabled, the lack of card movement does not necessarily indicate a malfunction. It may be the result of respecting the motion-reduction settings of the OS or browser. First read the settings and status statements, and then check the Console. When applying this to business progress indicators, a design that communicates the status using text such as 'In Preparation' or 'Complete' in addition to movement animations is indispensable.
Official and Primary Sources
Reference verification date: October 31, 2026.Although the official API specifications and source structure have been verified, the actual browser behavior of the created screen, GitHub Pages deployment, and WordPress display remain unverified.
GitHub Sample
The article body is an excerpt for understanding operations and meanings, while Daily Code is the definitive source for reading the implementation. Do not record unperformed inspections as 'successful'.
