Notes

Deployment

• Only production and development (preview) branches are deployed. Set with vercel.deploy.sh.
• urlState fn needs the origin url (NEXT_PUBLIC_APP_URL) which needs to match the domain it's used in. Couldn't figure out how to get the origin (= protocol & domain) server side so the env variable is needed. NEXT_PUBLIC_APP_URL is set in next.config.mjs to set working origins for each type of deployment in Vercel. Branch up-to-date urls don't set this properly by design, instead, view the unique URLs.

Various notes

• Exit animations work in in Template.jsx because App.jsx contains AnimatePresence
• Splash.jsx has CSS animation as starting animation so that it triggers faster. This is especially visible with slow connections. Critical CSS makes this possible
• In Hero.tsx files there are multiple units (vw, %, rem) used to position elements to proper locations. I'm mentioning this because it might look confusing at first why some elements use percentages and other viewport units
  • Viewport units (almost always vw) are used when the elements position/dimensions should change based on the viewport
  • Percentages (%) are used when the element's position should be relative to the Hero's or parent element's dimensions
  • Rems (rem) are used to keep the element in somewhat (note that the root font size scales) static position

Template transition and AnimatePresence

Template transitions have been tested like in this article with mode="popLayout": see the stripped example below. It worked, however, it created issues with the locomotive-scroll resetting the scroll position (removing the transform from <div className="Template-inner" data-s-section />) for the exiting page which is why the current implementation still exists. If the popLayout needs to be added for some reason, the scroll position probably needs to be forced e.g. w/ WebKitCSSMatrix.

Locomotive scroll has been removed so the above issue no longer exists. However, I'm keeping this section here to remind myself that popLayout could still possibly be used to change the current way of implementing the template transitions.

// App.jsx
<AnimatePresence mode="popLayout">
  <Component {...pageProps} key={asPath} />
</AnimatePresence>;

// Template.jsx
export const Template = forwardRef((props, forwadedRef) => (
  <m.div ref={forwadedRef} />
));

// some-page.jsx
const Page = forwardRef((props, ref) => <Template ref={ref} />);
export default Page;