Add App-Like Page Transitions to Web Apps – SSGOI

SSGOI is a JavaScript library that provides native app-like page transitions for websites. It transforms standard page navigations into fluid animations.

The library handles the entire transition process between web pages. It manages exit and enter animations while preserving state. You can define custom transitions for different routes or individual elements.

Features

See It In Action

Use Case

• Portfolio Websites: Create a memorable browsing experience by adding smooth transitions between project pages and case studies.
• E-commerce Platforms: Animate the transition from a product gallery to a detailed product page, mimicking the feel of a high-end mobile shopping app.
• Blogs and Publications: Implement Pinterest-style image expansion effects when a user clicks on an article thumbnail from a grid view.
• Multi-Step Forms: Guide users through registration or checkout processes with fluid animations between each step, reducing user friction.

Basic Usage

1. Install the appropriate package for your JavaScript framework using a package manager.

React:

npm install @ssgoi/react

Svelte:

npm install @ssgoi/svelte

2. You can add default transitions to your application in two steps.

Wrap your root application component with the Ssgoi provider. This component accepts a configuration object where you can define a default transition.

Here is an example for a React application:

import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';
export default function App({ children }) {
  return (
    <Ssgoi config={{ defaultTransition: fade() }}>
      <div style={{ position: 'relative' }}>
        {/* Your application content */}
        {children}
      </div>
    </Ssgoi>
  );
}

Then wrap the content of each page with the SsgoiTransition component. You must provide a unique id prop to each SsgoiTransition so the library can track page identity. The URL pathname is a good choice for a unique identifier.

import { SsgoiTransition } from '@ssgoi/react';
export default function AboutPage() {
  return (
    <SsgoiTransition id="/about">
      <h1>About Us</h1>
      {/* Page content */}
    </SsgoiTransition>
  );
}

3. You can specify different transitions for different routes using the transitions array in the configuration object. Each object in the array defines a from path, a to path, and the transition to use. Wildcards (*) can be used for dynamic routes.

const config = {
  transitions: [
    { from: '/gallery', to: '/photo/*', transition: pinterest() },
    { from: '/products', to: '/products/*', transition: drill({ direction: 'enter' }) },
  ],
  defaultTransition: fade()
};

4. You can also animate individual elements as they mount and unmount. Use the transition ref on a specific element and define in and out animations.

import { transition } from '@ssgoi/react';
import { fadeIn, slideUp } from '@ssgoi/react/transitions';
function AnimatedComponent() {
  return (
    <div ref={transition({
      key: 'unique-element-key',
      in: fadeIn(),
      out: slideUp()
    })}>
      An animated element
    </div>
  );
}

Related Resources

• Framer Motion: A production-ready motion library for React. It provides tools to create complex animations, including page transitions using its AnimatePresence component.
• GSAP (GreenSock Animation Platform): A professional animation library for JavaScript that can animate anything on the web. It is known for its performance and flexibility in creating intricate page transitions.
• Swup: A versatile and extensible page transition library for server-rendered websites. It focuses on delivering a fast, app-like experience with smooth animations.
• View Transitions API: The native browser API for creating animated transitions between different DOM states.SSGOI extends its functionality to browsers that do not yet support it.
• 10 Best Page Transition Plugins In JavaScript

FAQs

Q: How does SSGOI differ from the browser’s native View Transition API?
A: SSGOI works in all modern browsers, including Chrome, Firefox, and Safari, whereas the native View Transition API is not yet supported everywhere. It also offers additional animation options and is designed for server-side rendered applications.

Q: Can I use SSGOI with my current routing solution like React Router?
A: Yes, SSGOI is designed to work with your existing router. It does not require you to change your current navigation setup.

Q: What kind of animations can I create for individual elements?
A: You can apply various built-in animations like fadeIn, fadeOut, slideUp, slideDown, scaleIn, and scaleOut to individual elements during mount and unmount cycles.