View transitions and scroll animations: web motion without the heavy JavaScript

View transitions and scroll animations are browser features that let a website animate page changes and scrolling with a few lines of CSS instead of a heavy JavaScript library. A view transition smooths the jump from one page or state to the next. A scroll animation moves things as the visitor scrolls. Both used to need extra scripts that slowed sites down. Now they are built into Chrome, Edge and Safari, with Firefox catching up fast. That is why you are seeing more sites that feel like apps: pages fade into each other and sections slide in as you read. Used with a light touch, motion makes a site feel polished. Used too much, it makes people sick or slows them down.

Here is what the trend is, where it works today, how to use it on your platform, and when to leave it out.

What these features actually do

View transitions

A view transition animates the change between two views. The browser takes a picture of the old view, builds the new one, and animates from one to the other. The default is a soft crossfade, but you can name elements so they morph. Picture a grid of product photos where the one you tap grows smoothly into the large photo at the top of the product page. That used to take a lot of custom code.

There are two kinds:

• Same-document transitions happen inside one page, such as switching tabs or filtering a list. web.dev reported that these became Baseline Newly available on October 14, 2025 when Firefox 144 shipped them, so they now work in all three major browser engines. Firefox's first version does not include view transition types.
• Cross-document transitions happen between two separate pages on the same site, which is what most business websites are. The web features explorer lists support in Chrome and Edge 126 and Safari 18.2, with Firefox not supported yet.

Scroll-driven animations

A scroll-driven animation ties an animation's progress to scrolling. Scroll down and it moves forward. Stop and it pauses. Scroll up and it runs backward. A reading progress bar across the top of a blog post is the classic example. Another is an image that fades in as it enters the screen.

Chrome's team says scroll-driven animations shipped in 2023. Apple added them in Safari 26, released in September 2025. In September 2026, a Mozilla engineer posted an intent to ship saying the plan was to turn scroll-driven animations on by default in Firefox 159. Once that happens, the feature will work across all major browsers.

Scroll-triggered animations

Scroll-triggered animations are the newest piece. Instead of following the scroll bar, they start when an element crosses a point on the screen and then play out on their own clock. Chrome's developer blog describes them as "time-based animations that trigger when crossing a specific scroll offset". Think of a stat that counts up once when it comes into view. web.dev's March 2026 roundup lists them in Chrome and Edge 146, with Firefox and Safari not supported yet. For now, treat this one as a nice extra in Chromium browsers with a fallback for everyone else.

Why this trend is happening now

Three things came together.

1. Browser support caught up. For years these effects were Chrome only. Same-page view transitions reached every major engine in late 2025, Safari shipped scroll-driven animations the same fall, and Firefox announced its plan for them in 2026. Designers can finally use them on client sites without worrying that half the audience gets a broken page.
2. Less JavaScript means faster pages. Scroll effects used to depend on scripts that listen to every scroll event. Chrome's team notes that, for the reveal-on-scroll pattern, you can now "say goodbye to IntersectionObserver", the script approach most sites use today. Less script work on the main thread is good for responsiveness, which ties into the Core Web Vitals that Google measures.
3. Users expect app-like feel. People spend most of their screen time in apps where screens slide and fade. A website that snaps hard from page to page can feel dated by comparison.

What it looks like on real sites

You will find plenty of this on the sites in our design inspiration roundup. Some common patterns, described in words:

• The calm crossfade. Every page change fades softly instead of flashing white. Visitors barely notice it, which is the point.
• The morphing card. A service card on the home page expands into the header of that service's page, so the visitor keeps their place.
• The reading bar. A thin bar fills across the top of an article as you scroll, showing how far you have to go.
• The gentle reveal. Section headings and images rise a few pixels and fade in as they enter the screen.
• The scroll story. A product page where one big image changes as you scroll, explaining features step by step. This is the hardest to do well and the easiest to overdo.

How long should animations last?

Shorter than you think. Nielsen Norman Group's guidance on animation duration says most UI animations should run between 100 and 500 milliseconds. Simple feedback like a toggle should take about 100 milliseconds. Bigger changes, like a panel sliding in, fit 200 to 300 milliseconds. Their advice is to use "the shortest time that an animation can take without being jarring," and they note it is far more common for animations to be too long than too short.

How to apply it on your platform

WordPress

The WordPress Performance Team publishes a free View Transitions plugin that replaces hard page changes with a smooth animation. Its changelog says version 1.1.0 added "Respect prefers-reduced-motion settings," and the plugin page says visitors on unsupported browsers keep normal page loads. It requires WordPress 6.9 or newer. For scroll effects, add CSS to a child theme or your theme's custom CSS area. If you use a page builder, compare its built-in motion settings first; our guide to WordPress theme builders covers the main options.

Webflow

Webflow's Interactions panel already handles scroll effects visually. In 2025 Webflow announced it was making GSAP 100% free, including the formerly paid plugins, and said native Interactions would be rebuilt on GSAP. That gives Webflow designers a strong toolset, but it is still JavaScript, so keep effects few. Native CSS view transitions can go in your site's custom code. More on the platform in Webflow for design-led sites.

Shopify

Many themes include an animation setting in theme settings, so start there. For anything beyond that, edit the theme's CSS on a duplicate theme, test on a phone, and then publish. Watch product pages closely: motion should never delay the price, the photos or the Add to Cart button.

Custom sites

On a custom build, a cross-page fade takes very little CSS, and browsers that do not support it just load the next page normally. For scroll-driven effects, use native CSS and test in Firefox until its support is out. For scroll-triggered effects, keep a small script fallback, the same way Chrome's own demo does.

Always respect reduced motion

Every operating system has a setting to reduce motion, and websites can read it with the prefers-reduced-motion media query. WCAG's success criterion on Animation from Interactions says motion triggered by interaction should be able to be turned off unless it is essential. The reason is real: "Vestibular (inner ear) disorder reactions include dizziness, nausea and headaches." That criterion is Level AAA, so it is above the AA level most laws point to, but honoring the setting is cheap and is simply good practice. The W3C's draft Web Sustainability Guidelines also recommend using animation only when it helps understanding, limiting repetition and giving users control, with a reduced motion example.

In practice, wrap your motion in a check so it only runs when the visitor has not asked for less. Our post on website accessibility and WCAG covers the wider rules.

When not to use it

• When it hides content. If text only appears after an animation, some visitors, screen readers or slow phones may never see it. Content should be there first; motion is decoration.
• When it slows the page. Big scroll stories with large images and videos can hurt load times. Run the page through the checks in our guide to improving website speed before and after.
• When it fights your brand. A law firm, a medical practice or a bank usually wants calm and trust, not bouncing cards. A bold creative studio can go further.
• When it repeats. An effect that is fun the first time gets old on the tenth page. Save the big moments for one or two places.
• When you cannot test it. If no one will check it on Safari, Firefox and an older phone, keep it simple.

The bottom line

Native motion is one of the more useful design trends of the year because it gives you polish with less code. Start small: a soft crossfade between pages, a gentle reveal on key sections, and a reduced motion fallback. That is enough for most business sites to feel current without getting in the visitor's way.

Want motion that feels smooth without hurting speed or accessibility? Talk to us about your site.