meursyphus/ssgoi @ssgoi/react@4.1.0

@ssgoi/core@4.2.0, @ssgoi/react@4.1.0

on GitHub

Flash Prevention for Page Transitions

This release adds flash prevention support for React/Next.js applications.

The Problem

In frameworks like Next.js, React's mount lifecycle can occur after the browser paint. This causes a brief flash where the incoming page appears at its final position before the transition animation starts - breaking the seamless transition experience.

The Solution

Added getPathname prop to the Ssgoi component:

import { usePathname } from "next/navigation";
import { useEffectEvent } from "react"; // or polyfill for React 18

function SsgoiProvider({ children }) {
  const pathname = usePathname();
  const getPathname = useEffectEvent(() => pathname);

  return (
    <Ssgoi config={config} getPathname={getPathname}>
      {children}
    </Ssgoi>
  );
}

How It Works

1. Elements with matching transitions start with visibility: hidden
2. When the transition animation begins (onStart), visibility is restored to visible
3. This prevents the flash because the element is hidden until the animation positions it correctly

Changes

• @ssgoi/core@4.2.0: Added SsgoiExtendedContext with hasMatchingTransition utility
• @ssgoi/react@4.1.0: Added getPathname prop and getInitialStyle context for flash prevention