The short verdict
- A page transition is worth it when it shows a relationship between two pages.
- It is not worth it when it only adds a delay to every click.
- Keep them under about 400 milliseconds, and never block the next page from loading.
01What a transition is for
When you click from a list of projects to one project, a transition can carry the thumbnail up into the header of the next page. The visitor sees that this is the same thing, opened. That is useful: it tells them where they are without any words.
When every click, to any page, triggers the same full-screen wipe, the transition says nothing except “please wait”. After the third click, visitors feel it as a delay.
02When they help
- List to detail. Portfolio grids, blog cards, product lists. The item grows into its page.
- Steps in a sequence. Onboarding, a multi-step form, a guided tour. Forward and back motion shows progress.
- Persistent elements. A nav, a player or a cart that stays while the content changes around it.
- Brand moments. A portfolio or campaign site where atmosphere is part of the point, and visitors are browsing, not in a hurry.
03When they get in the way
- Long transitions on every link. A one-second wipe before each page doubles the time a fast site feels like it takes.
- Transitions that wait for animation before loading. The next page should load while the animation runs, not after.
- Sites people use for tasks. Docs, pricing, support. People want answers, not choreography.
- Broken back buttons. Custom routing that forgets scroll position or skips history entries.
04Timing
For most transitions, 250 to 400 milliseconds is enough to be seen and short enough not to be waited for. Leaving the old page can be faster than entering the new one. If you have a preloader on first load, it should be short and should not play again on every navigation. Our blog pages, for example, skip the home page’s preloader entirely.
“A transition should explain the click. If it only decorates it, cut it.”
05How they are built now
Browsers now support the View Transitions API, which animates between two states of a page, and in supporting browsers between two separate pages, with CSS. It needs very little code and falls back to a normal page load where it is not supported. For more control, libraries like Barba.js handle the page swap and hand the animation to GSAP. In Webflow, both approaches can be added with custom code.
Whichever you use, check that the browser’s back and forward buttons still work, that scroll position is sensible, that analytics still records page views, and that the transition is skipped when the visitor has asked their system to reduce motion.
06Questions people ask
Do page transitions hurt SEO?
Not if each page is still a real URL with its own HTML. Problems start when the transition library replaces proper pages with content loaded by script only.
Is a fade between pages enough?
A short fade is a safe default and makes navigation feel smoother. It just does not explain much.
Do transitions work on mobile?
Yes, and they can feel natural there. Keep them short and test on a mid-range phone.
Would transitions help my site?
Send us the link. We will tell you whether there is a relationship worth showing, or whether it is better without.
