u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eModern websites are expected to feel fast, responsive, and seamless. Yet traditional multi-page navigation can still create a noticeable interruption: clicking a link unloads the current document, the browser requests a new page, and the interface is rebuilt from scratch. The transition is also challenging to navigate, even with quick server responses.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThere are solutions to enhance this experience like using u003cstrongu003eBarba.js and GSAP page transitions.u003c/strongu003e Barba.js will take care of the navigation and replacement of the page contents, and GSAP will take care of the in/out animation. They can be used together to achieve something similar to a u003cstrongu003eSPA-like page transitionu003c/strongu003e, but maintain a traditional multi-page website structure.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThe key, however, is not just in making a page transition impressive. Other features that need to be taken into account for a production-ready implementation are reduced-motion preferences, mobile devices, and JavaScript failures along with browser history, SEO, focus management, and keyboard navigation.u003c/pu003ernHere, we’ll create a simple Barba.js and GSAP transition, and then examine the performance and accessibility implications of going into production.
1.What Are Barba.js and GSAP Page Transitions?
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eBarba.js and GSAP address two different aspect of the whole page transition issue.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js is used for handling page navigation. It can capture matching links, load the next page, upload the desired content and offer lifecycle hooks for executing transition logic.u003c/pu003ernThe visual part is done by GreenSock Animation Platform (GSAP). It offers developer exactness over properties like opacity, x, y, scale, and other animation properties. The relationship can be understood by analogizing to: When a page changes, it’s controlled by Barba.js, what it changes, is controlled by GSAP.rnrnu0026nbsp;rnu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eTraditional navigation:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eClick Link → Request Document → Current Page Unloads → New Page Loads → New Page Rendersu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eWith Barba.js:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eClick Link → Barba.js Intercepts → Leave Animation → Fetch Content → Replace Container → Enter Animation → New Page Readyu003c/strongu003eu003c/pu003ernThis creates the impression of continuous navigation while the website can still use separate server-rendered pages.rnrnu0026nbsp;rnu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eu003cstrongu003eWhat GSAP Doesu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eOnce Barba.js determines when a transition should happen, GSAP can control the animation itself.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eFor example, an outgoing page could fade out:u003c/pu003e
gsap.to(current.container, {
opacity: 0,
duration: 0.4
});
The incoming page could then fade in:
gsap.from(next.container, {
opacity: 0,
duration: 0.4
});
For more complex experiences, GSAP timelines can sequence multiple elements:rnrnu003cstrongu003eOverlay appears → Current content moves out → New content enters → Heading appears → Navigation becomes interactiveu003c/strongu003e
2.SPA-Like Without Building a Full SPA
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eThe one thing pro that this approach has is that you don’t always need to create an existing website into a SPA (React, Vue) application to make navigation smoother.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eIt’s possible to incorporate enhanced navigation behavior to a traditional multi-page website, without changing its architecture.u003c/pu003ernFor a more in-depth discussion of the difference in architecture, check out our article about u003ca href=u0022https://www.augustinfotech.com/blogs/single-page-vs-multi-page-web-applications/u0022u003esingle-page and multi-page applicationsu003c/au003e.
Traditional Navigation vs Barba.js + GSAP
| Aspect | Traditional Navigation | Barba.js + GSAP |
| Navigation | Full document reload | Content transition |
| Page architecture | Multi-page | Can remain multi-page |
| Animation control | Limited | Highly customizable |
| Navigation feel | Abrupt | Smoother |
| SPA-like experience | No | Yes |
| Implementation complexity | Low | Medium |
| Accessibility responsibility | Standard browser behavior | Requires additional consideration |
The important distinction is that Barba.js does not magically make an MPA a true SPA. It provides enhanced navigation behavior that can feel similar to an SPA.
3.How Barba.js and GSAP Work Together
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eTo build reliable transitions, it helps to understand how Barba.js organizes page content.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eBarba.js Wrapper and Containeru003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eA minimal structure can look like this:u003c/pu003ernu0026nbsp;
<body>
<div data-barba="wrapper">
<main data-barba="container" data-barba-namespace="home">
<h1>Home Page</h1>
<a href="/about.html">About</a>
</main>
</div>
</body>Leave
leave(data) {
return gsap.to(data.current.container, {
opacity: 0,
duration: 0.4
});
}
Enter
enter(data) {
return gsap.from(data.next.container, {
opacity: 0,
duration: 0.4
});
}u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eThe two important concepts are:u003c/pu003ernrnu003cul data-list-id=u002282461983u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002282461983u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;82461983u0026quot;,u0026quot;lu0026quot;:0}u0022u003eWrapper: The outer element that contains the transition area.u003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002282461983u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;82461983u0026quot;,u0026quot;lu0026quot;:0}u0022u003eContainer: The page-specific content that Barba.js replaces during navigation.u003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eA namespace can identify which page is currently being displayed.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eFor example:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;mainu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e data-barba=u0022containeru0022u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e data-barba-namespace=u0022aboutu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThis becomes particularly useful when different pages need different transition behavior.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUnderstanding Transition Hooksu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThree important Barba.js hooks are:u003c/pu003ernrnu003ctable class=u0022zw-tableu0022 data-theme=u0022{u0026quot;themeNameu0026quot;:u0026quot;theme1u0026quot;,u0026quot;themeObju0026quot;:{u0026quot;tblPru0026quot;:{u0026quot;cellu0026quot;:{u0026quot;bordersu0026quot;:{u0026quot;border-topu0026quot;:{u0026quot;coloru0026quot;:u0026quot;rgb(0,0,0)u0026quot;,u0026quot;widthu0026quot;:u0026quot;1pxu0026quot;,u0026quot;typeu0026quot;:u0026quot;solidu0026quot;},u0026quot;border-rightu0026quot;:{u0026quot;coloru0026quot;:u0026quot;rgb(0,0,0)u0026quot;,u0026quot;widthu0026quot;:u0026quot;1pxu0026quot;,u0026quot;typeu0026quot;:u0026quot;solidu0026quot;},u0026quot;border-leftu0026quot;:{u0026quot;coloru0026quot;:u0026quot;rgb(0,0,0)u0026quot;,u0026quot;widthu0026quot;:u0026quot;1pxu0026quot;,u0026quot;typeu0026quot;:u0026quot;solidu0026quot;},u0026quot;border-bottomu0026quot;:{u0026quot;coloru0026quot;:u0026quot;rgb(0,0,0)u0026quot;,u0026quot;widthu0026quot;:u0026quot;1pxu0026quot;,u0026quot;typeu0026quot;:u0026quot;solidu0026quot;}}}}}}u0022 data-cols=u0022[{u0026quot;wtu0026quot;:u0026quot;0.518inu0026quot;},{u0026quot;wtu0026quot;:u0026quot;1.683inu0026quot;},{u0026quot;wtu0026quot;:u0026quot;2.441inu0026quot;}]u0022 data-width=u00224.64inu0022 data-table-name=u0022Table_4u0022u003ernu003ctbodyu003ernu003ctr data-row-info=u0022{u0026quot;idu0026quot;:u0026quot;rw-v34zrlnvjy69u0026quot;,u0026quot;typeu0026quot;:u0026quot;rowu0026quot;}u0022u003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eHooku003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eWhen It Runsu003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eTypical Useu003c/pu003ernu003c/tdu003ernu003c/tru003ernu003ctr data-row-info=u0022{u0026quot;idu0026quot;:u0026quot;rw-v9g64zc1756hu0026quot;,u0026quot;typeu0026quot;:u0026quot;rowu0026quot;}u0022u003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.330inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eonceu003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.330inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eInitial page loadu003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.330inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eIntro animationu003c/pu003ernu003c/tdu003ernu003c/tru003ernu003ctr data-row-info=u0022{u0026quot;idu0026quot;:u0026quot;rw-r2gd9u3862lnu0026quot;,u0026quot;typeu0026quot;:u0026quot;rowu0026quot;}u0022u003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eleaveu003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eCurrent page exitsu003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eFade/slide current contentu003c/pu003ernu003c/tdu003ernu003c/tru003ernu003ctr data-row-info=u0022{u0026quot;idu0026quot;:u0026quot;rw-mysy9q4osh3zu0026quot;,u0026quot;typeu0026quot;:u0026quot;rowu0026quot;}u0022u003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eenteru003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eNew page entersu003c/pu003ernu003c/tdu003ernu003ctd class=u0022zw-tdu0022 data-cell-height=u00220.529inu0022u003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eReveal new contentu003c/pu003ernu003c/tdu003ernu003c/tru003ernu003c/tbodyu003ernu003c/tableu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eInitial load:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ePage Load → once() → Intro Animationu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eNavigation:u003c/pu003ernClick Link → Barba.js → leave() → New Content → enter()
How to Create Smooth Page Transitions with Barba.js and GSAP
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eLet’s create a basic fade transitionu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThis isn’t about creating a fancy visual effect, just yet. On the contrary, we would like to have a small implementation that really shows the Barba.js life cycle .u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e1. Install Barba.js and GSAPu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eIn case of a package-based project:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003enpm install @barba/core gsapu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThen import them:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eimport barba from ‘@barba/core’;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eimport { gsap } from ‘gsap’;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThe libraries may also be included via the relevant browser builds (for a simple HTML project).u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e2. Add the Barba.js HTML Structureu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThere should be a shared wrapper and a replaceable container on the pageu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;bodyu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;div data-barba=u0022wrapperu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;main data-barba=u0022containeru0022 data-barba-namespace=u0022homeu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;h1u0026gt;Home Pageu0026lt;/h1u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;a href=u0022/about.htmlu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e Go to Aboutu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;/au0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;/mainu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;/divu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;/bodyu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThe format of the destination page should be the same as that of the source page.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;ffu0026quot;:u0026quot;Calibri, sans-serifu0026quot;,u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;vau0026quot;:u0026quot;baselineu0026quot;,u0026quot;fw_iu0026quot;:400,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eFor example:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;bodyu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;div data-barba=u0022wrapperu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;main data-barba=u0022containeru0022 data-barba-namespace=u0022aboutu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;h1u0026gt;About Pageu0026lt;/h1u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;a href=u0022/index.htmlu0022u0026gt;Back to Homeu0026lt;/au0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;/mainu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;/divu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;/bodyu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e3. Initialize Barba.jsu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eWe can now get Barba.js working with GSAP:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eimport barba from ‘@barba/core’;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eimport { gsap } from ‘gsap’;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ebarba.init({u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e transitions: [u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e name: ‘fade’,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e leave(data) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e return gsap.to(data.current.container, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.4,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ease: ‘power2.out’u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e });u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e},u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e enter(data) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e return gsap.from(data.next.container, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.4,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ease: ‘power2.out’u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e });u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e }u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e }u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ]u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eImportant here is that the GSAP animation returns a Promise-like animation object that Barba.js can await before moving on with the transition life cycle.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e4. Set the Initial State Explicitlyu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUse gsap.set() to set up an initial state for more controlled transitions:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eenter(data) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e gsap.set(data.next.container, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e });u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e return gsap.to(data.next.container, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 1,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.4,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ease: ‘power2.out’u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e });u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThis is helpful since the target page will be in the desired initial condition prior to the animation. It also prevents the usual ‘glitch’ whereby an element is briefly on screen in its final state before GSAP animates it.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e5. Using an Overlay Transitionu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUsing a full-screen overlay can give a more professional look.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eHTML:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;div class=u0022page-transitionu0022u0026gt;u0026lt;/divu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;div data-barba=u0022wrapperu0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;main data-barba=u0022containeru0022u0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;!u002du002d Content u002du002du0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e u0026lt;/mainu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;/divu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eCSS:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e.page-transition {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e position: fixed;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e inset: 0;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e pointer-events: none;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e transform: scaleX(0);u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e transform-origin: left;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eGSAP can then control the overlay:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eleave(data) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e const timeline = gsap.timeline();u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e timeline.to(‘.page-transition’, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e scaleX: 1,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.5,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ease: ‘power2.inOut’u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e });u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e return timeline;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e},u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eenter(data) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e const timeline = gsap.timeline();u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e timeline.to(‘.page-transition’, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e scaleX: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.5,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ease: ‘power2.inOut’u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e });u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e return timeline;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernThis provides you with a foundation to build more advanced transitions.
Optimizing Barba.js and GSAP Page Transitions for Real-World Performance
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eA transition can look smooth while still being expensive. Good implementation should minimize unnecessary JavaScript, layout recalculation, DOM manipulation, and navigation delays.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eAnimate Transform and Opacityu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ePrefer performant properties such as transform and opacity:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.to(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e x: 100,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.5u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eInstead of frequently animating layout-heavy properties:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.to(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e left: 100,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e width: 500,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e marginLeft: 50u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eProperties such as width and position are not forbidden, but should be used deliberately.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eKeep Transitions Shortu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eA transition should support navigation, not delay it. For most websites, short animations around the navigation experience are more usable than elaborate multi-second effects.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eThe user should notice continuity, not wait for the animation.u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eUse gsap.set() for Immediate State Changesu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.set(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e y: 20u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.to(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 1,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e y: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.5u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThis keeps the initial state deterministic.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eAvoid Animating Everythingu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eAnimating every heading, image, card, button, and paragraph can make the interface noisy and unnecessarily expensive.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eA simple page transition combined with one meaningful content animation is often more effective.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eOld Page → Transition → New Page → Primary Contentu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eClean Up Timelines and Event Listenersu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js replaces page containers, so JavaScript associated with the previous DOM can become stale.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eWithout cleanup, navigation may create multiple:u003c/pu003ernrnu003cul data-list-id=u002282608329u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002282608329u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;82608329u0026quot;,u0026quot;lu0026quot;:0}u0022u003eGSAP timelinesu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002282608329u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;82608329u0026quot;,u0026quot;lu0026quot;:0}u0022u003eEvent listenersu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002282608329u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;82608329u0026quot;,u0026quot;lu0026quot;:0}u0022u003eScrollTrigger instancesu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002282608329u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;82608329u0026quot;,u0026quot;lu0026quot;:0}u0022u003eObserversu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUse a clear initialization and cleanup strategy:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003elet pageTimeline;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003efunction initPage() {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e pageTimeline = gsap.timeline();u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003efunction cleanupPage() {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e pageTimeline?.kill();u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ePage-specific ScrollTrigger instances should also be cleaned up when their DOM is removed.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eDon’t Make Animation a Loading Barrieru003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eLarge images, third-party scripts, fonts, or analytics should not unnecessarily block the transition.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThink of the transition as a separate UX layer:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eNavigation → Transition / Content Request / Page Initializationu003c/strongu003eu003c/pu003ernThe goal is to avoid making animation itself feel like a loading screen.
Making Barba.js Transitions Accessible
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eNavigation should be made easier with animation, but never be difficult for keyboard users, screen-reader users, or people who want less animation.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eRespect prefers-reduced-motionu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eCSS:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e@media (prefers-reduced-motion: reduce) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e .page-transition {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e transition: none;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e }u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;ffu0026quot;:u0026quot;Calibri, sans-serifu0026quot;,u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;vau0026quot;:u0026quot;baselineu0026quot;,u0026quot;fw_iu0026quot;:400,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eYou can also modify GSAP using JavaScript:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003econst reduceMotion = window.matchMedia(u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e ‘(prefers-reduced-motion: reduce)’u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e).matches;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003econst duration = reduceMotion ? 0 : 0.4;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.to(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e durationu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eIt is not always necessary to remove the entire feedback. Small movement-based animations or content replacement might be better than large movement changes.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cbr class=u0022zw-bru0022 /u003eu003cstrongu003eManage Keyboard Focusu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eAs Barba.js does not fully reloading the entire document, it might be necessary to manage focus explicitly.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;ffu0026quot;:u0026quot;Calibri, sans-serifu0026quot;,u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;vau0026quot;:u0026quot;baselineu0026quot;,u0026quot;fw_iu0026quot;:400,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003efunction setPageFocus(container) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e container.setAttribute(‘tabindex’, ‘-1’);u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e container.focus();u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;,u0026quot;bgcu0026quot;:u0026quot;rgb(255,255,255)u0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eIf the structure of the site lends itself to it, the main content heading or container can be a logical place for the destination focus.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cbr class=u0022zw-bru0022 /u003eu003cstrongu003eKeep Navigation Keyboard Accessibleu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUse normal links:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;a href=u0022/about.htmlu0022u0026gt;Aboutu0026lt;/au0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;,u0026quot;bgcu0026quot;:u0026quot;rgb(255,255,255)u0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eInstead of elements that can only be clicked, use:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;,u0026quot;bgcu0026quot;:u0026quot;rgb(255,255,255)u0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;div onclick=u0022navigateToAbout()u0022u0026gt;Aboutu0026lt;/divu0026gt;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js isn’t intended to replace normal navigation.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eAvoid putting users in a “trap”.u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eAvoid:u003c/pu003ernrnu003cul data-list-id=u002254010362u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002254010362u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;54010362u0026quot;,u0026quot;lu0026quot;:0}u0022u003eExcessively long transitionsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002254010362u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;54010362u0026quot;,u0026quot;lu0026quot;:0}u0022u003eInfinite animationsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002254010362u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;54010362u0026quot;,u0026quot;lu0026quot;:0}u0022u003eInteraction-blocking overlaysu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002254010362u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;54010362u0026quot;,u0026quot;lu0026quot;:0}u0022u003eAnimations that prevent keyboard accessu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002254010362u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;54010362u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTransitions that continue after content is usableu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eAccessible Web Animations Need More Than Reduced Motionu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eAlso consider:u003c/pu003ernrnu003cul data-list-id=u002277531802u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eKeyboard navigationu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eFocus managementu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eVisible focus indicatorsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eSemantic HTMLu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eReadable content and contrastu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eScreen-reader announcements where appropriateu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277531802u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77531802u0026quot;,u0026quot;lu0026quot;:0}u0022u003eJavaScript failure behavioru003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eFor more information, see our guide to u003ca href=u0022https://www.augustinfotech.com/blogs/web-accessibility-2025-a11y-best-practices-for-building-inclusive-uis/u0022u003eweb accessibility best practicesu003c/au003e.u003c/pu003e
SEO and Browser Navigation Considerations
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eSmooth transitions should not compromise discoverability or normal navigation.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUpdate the Page Titleu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eWhen content changes without a full reload, update the document title:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003edocument.title = nextPageTitle;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ePage-specific metadata should also be handled according to the project’s implementation.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eKeep URLs Correctu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eCorrect URLs are important for:u003c/pu003ernrnu003cul data-list-id=u002267516188u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002267516188u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;67516188u0026quot;,u0026quot;lu0026quot;:0}u0022u003eBookmarkingu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002267516188u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;67516188u0026quot;,u0026quot;lu0026quot;:0}u0022u003eSharingu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002267516188u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;67516188u0026quot;,u0026quot;lu0026quot;:0}u0022u003eBrowser historyu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002267516188u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;67516188u0026quot;,u0026quot;lu0026quot;:0}u0022u003eAnalyticsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002267516188u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;67516188u0026quot;,u0026quot;lu0026quot;:0}u0022u003eUser expectationsu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eTest Back and Forwardu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eTest more than simple link clicks:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eHome → About → Services → Back → Forwardu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBrowser history can reveal issues that normal navigation does not.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003ePreserve Normal Page Accessibilityu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUse progressive enhancement. Real links should continue to work if JavaScript fails:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu0026lt;a href=u0022/services.htmlu0022u0026gt;Servicesu0026lt;/au0026gt;u003c/pu003ernBarba.js should enhance navigation, not make content dependent on JavaScript.
Common Barba.js and GSAP Implementation Mistakes
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eu003cstrongu003e1. Page Scripts Stop Workingu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eWhen Barba.js replaces a container, old event listeners do not automatically transfer.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eInstead of:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003edocumentu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e .querySelector(‘.menu-button’)u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e .addEventListener(‘click’, openMenu);u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003euse page-specific initialization:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003efunction initPage(container) {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e const menuButton = container.querySelector(‘.menu-button’);u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e if (!menuButton) return;u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e menuButton.addEventListener(‘click’, openMenu);u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e}u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eInitialize the new page after navigation.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e2. Duplicate Event Listenersu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eRunning initialization after every transition without cleanup can cause one action to trigger multiple times.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThink:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eInitialize → Use → Cleanup → Initialize Againu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003enot:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003eInitialize → Initialize → Initializeu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e3. Flashing Before Animation Startsu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.from() can sometimes allow an element to briefly render in its final state.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUse an explicit initial state:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.set(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 0u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003egsap.to(element, {u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e opacity: 1,u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e duration: 0.4u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003e});u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e4. Animating Layout-Heavy Propertiesu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ePrefer transform and opacity for common movement and visibility transitions.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e5. Forgetting Mobile Devicesu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eTest:u003c/pu003ernrnu003cul data-list-id=u002259644159u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002259644159u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;59644159u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTouch navigationu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002259644159u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;59644159u0026quot;,u0026quot;lu0026quot;:0}u0022u003eSmaller screensu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002259644159u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;59644159u0026quot;,u0026quot;lu0026quot;:0}u0022u003eSlow networksu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002259644159u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;59644159u0026quot;,u0026quot;lu0026quot;:0}u0022u003eReduced-motion settingsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002259644159u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;59644159u0026quot;,u0026quot;lu0026quot;:0}u0022u003eLow-powered devicesu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002259644159u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;59644159u0026quot;,u0026quot;lu0026quot;:0}u0022u003ePortrait and landscape orientationu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e6. Ignoring Reduced Motionu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eAlways consider the user’s prefers-reduced-motion preference.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e7. Breaking Browser Historyu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eTest Back and Forward independently rather than assuming normal links cover every case.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e8. Using One Transition Everywhereu003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eDifferent pages may need different animation intensity. Namespaces can distinguish page types:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003edata-barba-namespace=u0022portfoliou0022u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eand:u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003edata-barba-namespace=u0022documentationu0022u003c/pu003ernA visual portfolio transition may be appropriate, while documentation pages may benefit from an almost instant transition.
Production Checklist
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eBefore deploying Barba.js and GSAP transitions, run through this checklist.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003ePerformanceu003c/pu003ernrnu003cul data-list-id=u002283416476u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002283416476u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;83416476u0026quot;,u0026quot;lu0026quot;:0}u0022u003eAnimate transform and opacity where appropriateu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002283416476u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;83416476u0026quot;,u0026quot;lu0026quot;:0}u0022u003eKeep transition durations shortu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002283416476u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;83416476u0026quot;,u0026quot;lu0026quot;:0}u0022u003eAvoid unnecessary animationsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002283416476u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;83416476u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest on lower-powered devicesu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002283416476u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;83416476u0026quot;,u0026quot;lu0026quot;:0}u0022u003eInspect performance using browser DevToolsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002283416476u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;83416476u0026quot;,u0026quot;lu0026quot;:0}u0022u003eClean up unused GSAP timelines and animation instancesu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eAccessibilityu003c/pu003ernrnu003cul data-list-id=u002242592323u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002242592323u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;42592323u0026quot;,u0026quot;lu0026quot;:0}u0022u003eRespect prefers-reduced-motionu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002242592323u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;42592323u0026quot;,u0026quot;lu0026quot;:0}u0022u003eMaintain keyboard navigationu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002242592323u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;42592323u0026quot;,u0026quot;lu0026quot;:0}u0022u003eManage focus after navigationu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002242592323u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;42592323u0026quot;,u0026quot;lu0026quot;:0}u0022u003ePreserve visible focus indicatorsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002242592323u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;42592323u0026quot;,u0026quot;lu0026quot;:0}u0022u003eAvoid interaction-blocking animationsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002242592323u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;42592323u0026quot;,u0026quot;lu0026quot;:0}u0022u003eKeep semantic HTMLu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eMobile Responsivenessu003c/pu003ernrnu003cul data-list-id=u002220733408u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002220733408u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;20733408u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest touch navigationu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002220733408u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;20733408u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest smaller screensu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002220733408u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;20733408u0026quot;,u0026quot;lu0026quot;:0}u0022u003eCheck animation intensity on mobileu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002220733408u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;20733408u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest portrait and landscape layoutsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002220733408u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;20733408u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest slower network conditionsu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBrowser Navigationu003c/pu003ernrnu003cul data-list-id=u002297760575u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002297760575u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;97760575u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest normal linksu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002297760575u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;97760575u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest Backu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002297760575u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;97760575u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest Forwardu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002297760575u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;97760575u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest page refreshu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002297760575u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;97760575u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest direct URLsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002297760575u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;97760575u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest external linksu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eScript Cleanupu003c/pu003ernrnu003cul data-list-id=u002277357574u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277357574u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77357574u0026quot;,u0026quot;lu0026quot;:0}u0022u003eReinitialize page-specific scriptsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277357574u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77357574u0026quot;,u0026quot;lu0026quot;:0}u0022u003eRemove duplicate event listenersu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277357574u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77357574u0026quot;,u0026quot;lu0026quot;:0}u0022u003eKill obsolete GSAP timelinesu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277357574u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77357574u0026quot;,u0026quot;lu0026quot;:0}u0022u003eClean up ScrollTrigger instances when usedu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002277357574u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;77357574u0026quot;,u0026quot;lu0026quot;:0}u0022u003eAvoid references to removed DOM elementsu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eSEOu003c/pu003ernrnu003cul data-list-id=u002266711263u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002266711263u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;66711263u0026quot;,u0026quot;lu0026quot;:0}u0022u003eUpdate page titlesu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002266711263u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;66711263u0026quot;,u0026quot;lu0026quot;:0}u0022u003ePreserve correct URLsu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002266711263u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;66711263u0026quot;,u0026quot;lu0026quot;:0}u0022u003eVerify canonical metadatau003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002266711263u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;66711263u0026quot;,u0026quot;lu0026quot;:0}u0022u003eCheck page-specific metadatau003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002266711263u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;66711263u0026quot;,u0026quot;lu0026quot;:0}u0022u003eTest direct page accessu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002266711263u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;66711263u0026quot;,u0026quot;lu0026quot;:0}u0022u003eEnsure content remains available without transition JavaScriptu003c/pu003ernu003c/liu003ernu003c/ulu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eFallback Behaviouru003c/pu003ernrnu003cul data-list-id=u002292491325u0022 data-list-format=u0022{u0026quot;level5u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level4u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level7u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level6u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;3.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level8u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;4.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1},u0026quot;level1u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:7,u0026quot;startsWithu0026quot;:1},u0026quot;level0u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;0.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level3u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;2inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:6,u0026quot;startsWithu0026quot;:1},u0026quot;level2u0026quot;:{u0026quot;paraFormatu0026quot;:{u0026quot;tiu0026quot;:u0026quot;-0.25inu0026quot;,u0026quot;mlu0026quot;:u0026quot;1.5inu0026quot;,u0026quot;textFormatu0026quot;:{}},u0026quot;typeu0026quot;:8,u0026quot;startsWithu0026quot;:1}}u0022 data-spl-bullet-format=u0022{}u0022u003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002292491325u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;92491325u0026quot;,u0026quot;lu0026quot;:0}u0022u003eLinks still work without JavaScriptu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002292491325u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;92491325u0026quot;,u0026quot;lu0026quot;:0}u0022u003eContent isn’t hidden permanently by animation CSSu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002292491325u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;92491325u0026quot;,u0026quot;lu0026quot;:0}u0022u003eNavigation doesn’t depend entirely on GSAPu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002292491325u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;92491325u0026quot;,u0026quot;lu0026quot;:0}u0022u003eUsers aren’t trapped by a failed transitionu003c/pu003ernu003c/liu003ern tu003cliu003ernu003cp class=u0022zw-list zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-list-id=u002292491325u0022 data-list-info=u0022{u0026quot;idu0026quot;:u0026quot;92491325u0026quot;,u0026quot;lu0026quot;:0}u0022u003eThe website remains usable when JavaScript failsu003c/pu003ernu003c/liu003ernu003c/ulu003e
Conclusion
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eu003cstrongu003eBarba.js and GSAP page transitionsu003c/strongu003e can make traditional multi-page navigation feel smoother and more continuous without rebuilding the website as a single-page application.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js manages navigation and lifecycle hooks, while GSAP provides precise control over visual animation. The combination becomes most effective when developers also consider u003cstrongu003eGSAP animation performanceu003c/strongu003e, initialization and cleanup, browser history, SEO metadata, keyboard focus, mobile devices, and reduced-motion preferences.u003c/pu003ernThe best transition is one that creates continuity without making users wait. When motion is fast, purposeful, and accessible, u003cstrongu003eBarba.js and GSAP page transitionsu003c/strongu003e can provide an SPA-like experience while preserving the flexibility of a traditional website.
FAQs
u003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022 data-doc-id=u00222308279000006039009u0022 data-doc-type=u0022writeru0022u003eu003cstrongu003e1. What is Barba.js used for?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js creates smooth page transitions by managing navigation, content replacement, and transition lifecycle events without the visual interruption of a traditional full-page reload.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e2. How do Barba.js and GSAP work together?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js manages navigation and lifecycle hooks, while GSAP handles the animations. Together, they provide highly customizable page transitions.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e3. Can Barba.js make a website work like an SPA?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eIt can make a traditional multi-page website feel like an SPA by replacing page content without a full document reload for compatible navigation. However, it does not automatically convert the underlying architecture into a true SPA.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e4. Do Barba.js page transitions affect SEO?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eThey can if implemented incorrectly. Pages should remain accessible through real URLs, titles and metadata should be updated correctly, and content should remain usable without JavaScript.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e5. How can I improve GSAP page-transition performance?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eUse performant properties such as transform and opacity, keep transitions short, avoid unnecessary animations, and clean up timelines and page-specific animation instances. Use browser DevTools to measure the result.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e6. How do I make page-transition animations accessible?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eRespect prefers-reduced-motion, maintain keyboard navigation and focus management, preserve visible focus states, use semantic HTML, and avoid excessive or interaction-blocking animations.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cstrongu003e7. Why do scripts stop working after a Barba.js transition?u003c/strongu003eu003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eBarba.js can replace the DOM container containing previously initialized elements. Their event listeners do not automatically transfer to the new DOM. Reinitialize page-specific scripts after navigation and clean up old listeners, timelines, observers, and other resources.u003c/pu003ernu003cp class=u0022zw-paragraph heading0u0022 data-header=u00220u0022 data-textformat=u0022{u0026quot;ffu0026quot;:u0026quot;Calibri, sans-serifu0026quot;,u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;vau0026quot;:u0026quot;baselineu0026quot;,u0026quot;fw_iu0026quot;:400,u0026quot;typeu0026quot;:u0026quot;textu0026quot;}u0022 data-margin-bottom=u00228ptu0022 data-hd-info=u00220u0022 data-line-height=u00221.1u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003ernu003cp class=u0022zw-paragraphu0022 data-textformat=u0022{u0026quot;ffu0026quot;:u0026quot;Robotou0026quot;,u0026quot;fvu0026quot;:u0026quot;normalu0026quot;,u0026quot;tdu0026quot;:u0026quot;noneu0026quot;,u0026quot;csu0026quot;:u0026quot;0ptu0026quot;,u0026quot;fwu0026quot;:u0026quot;noneu0026quot;,u0026quot;fgcu0026quot;:u0026quot;rgb(0, 0, 0)u0026quot;,u0026quot;sizeu0026quot;:u0026quot;12.00u0026quot;,u0026quot;vau0026quot;:u0026quot;baselineu0026quot;,u0026quot;fw_iu0026quot;:400,u0026quot;typeu0026quot;:u0026quot;textu0026quot;,u0026quot;fsu0026quot;:u0026quot;normalu0026quot;,u0026quot;bgcu0026quot;:u0026quot;rgba(0, 0, 0, 0)u0026quot;}u0022 data-margin-bottom=u002212ptu0022 data-line-height=u00221.2u0022u003eu003cspan class=u0022EOPu0022u003e u003c/spanu003eu003c/pu003e
