Introduction to SSGOI

SSGOI is a library that enables native app-like smooth page transition animations on the web.

Latest Posts

Insights on Svelte, Flutter, and web development

Understanding Svelte 5 Runes: The Future of Reactivity

Dive deep into Svelte 5's new rune system and discover how it revolutionizes state management and reactivity.

Sarah Chen•12mSvelte

Mastering Flutter Animations: From Basics to Advanced

Learn how to create beautiful, performant animations in Flutter that bring your mobile apps to life.

Michael Park•15mFlutter

Building Scalable Applications with SvelteKit

A comprehensive guide to architecting large-scale applications with SvelteKit, covering best practices, patterns, and real-world examples.

Emma Wilson•18mSvelteKit

React Server Components: A Deep Dive

Understanding the revolutionary React Server Components and how they change the way we build React applications.

Alex Johnson•10mReact

Modern CSS Techniques You Should Know in 2024

Explore the latest CSS features including Container Queries, Cascade Layers, and the :has() selector that are revolutionizing web styling.

Maria Garcia•8mCSS

Web Performance Optimization: A Comprehensive Guide

Master the art of web performance with modern techniques including Core Web Vitals optimization, resource hints, and cutting-edge loading strategies.

David Kim•14mPerformance

Advanced TypeScript Patterns for Production

Level up your TypeScript skills with advanced patterns including type guards, conditional types, and template literal types.

James Chen•12mTypeScript

Why SSGOI?

1. Works in All Browsers

Unlike the browser's Chrome View Transition API, SSGOI provides a consistent experience across all modern browsers. It ensures the same animations work in Chrome, Firefox, and Safari.

2. Perfect Server-Side Rendering Support

• SSR/SSG Compatible: Works flawlessly with Next.js, Nuxt, SvelteKit without hydration issues
• SEO Friendly: Animations don't affect search engine optimization
• Optimized Initial Load: Leverages server-rendered HTML as-is

3. Use Your Framework's Routing As-Is

You can add animations while using your framework's routing as-is. Compatible with all routing approaches including Next.js Link, SvelteKit's goto, Vue Router, and more.

Key Features

// Get started with just a few lines of code
const config = {
  defaultTransition: fade(),
  transitions: [
    {
      from: '/home',
      to: '/about',
      transition: slide({ direction: 'left' })
    }
  ]
}

🎨 Rich Transition Effects

• Fade: Smooth fade in/out
• Slide: Directional sliding
• Scale: Zoom in/out effects
• Hero: Shared element animations
• Pinterest: Pinterest-style expansion
• Ripple: Material Design ripple effect

⚡ Optimized Performance

• Natural motion with spring-based physics animations
• Small bundle size (< 20KB gzipped)
• Tree-shaking support to include only what you use

🛠️ Developer Friendly

• Full TypeScript support
• Intuitive API design
• Rich documentation and examples
• Support for all major frameworks including React, Svelte, Vue

Getting Started

Learn how to apply SSGOI to your project through the quick start guide in the next section!