SSGOI API Reference

This document provides a comprehensive reference for the SSGOI (Svelte Smooth Go Transition Library) API.

Table of Contents

• Configuration
  • createTransitionConfig Function
    • Parameters
• Built-in Transitions
  • fade
  • scroll
  • ripple
  • none
  • pinterest
  • hero
• Hero Transitions
  • Usage

Configuration

createTransitionConfig Function

Creates a configuration object for your transitions.

import { createTransitionConfig, transitions } from 'ssgoi';

const config = createTransitionConfig({
  transitions: [
    {
      from: '/home',
      to: '/about',
      transitions: transitions.fade()
    }
  ],
  defaultTransition: transitions.fade()
});

Parameters

Parameter	Type	Description
transitions	TransitionRule[]	Array of transition rules
defaultTransition	TransitionFunction	Default transition to use when no rules match

Built-in Transitions

SSGOI provides several built-in transition effects.

fade

Simple opacity transition.

transitions.fade({
  duration?: number,  // default: 300
  delay?: number,     // default: 0
  easing?: Function   // default: linear
})

scroll

Scroll-based transitions in two directions.

transitions.scrollUpToDown({
  velocity?: number,  // default: 1.2
  delay?: number,     // default: 0
  easing?: Function   // default: linear
})

transitions.scrollDownToUp({
  velocity?: number,  // default: 1.2
  delay?: number,     // default: 0
  easing?: Function   // default: linear
})

ripple

Circular reveal/hide transition.

transitions.ripple({
  duration?: number,  // default: 500
  delay?: number,     // default: 0
  easing?: Function   // default: linear
})

none

No transition effect.

transitions.none({
  duration?: number,  // default: 0
  delay?: number,     // default: 0
  easing?: Function   // default: linear
})

pinterest

Pinterest-style transitions for image galleries.

transitions.pinterest.enter({
  duration?: number,  // default: 500
  delay?: number,     // default: 0
  easing?: Function   // default: cubicOut
})

transitions.pinterest.exit({
  duration?: number,  // default: 500
  delay?: number,     // default: 0
  easing?: Function   // default: cubicOut
})

hero

Hero transitions between elements.

transitions.hero({
  duration?: number,  // default: 500
  delay?: number,     // default: 0
  easing?: Function   // default: cubicOut
})

Hero Transitions

Hero transitions allow smooth animations between related elements across different pages.

Usage

Add the data-hero-key attribute to elements you want to transition between:

<!-- Page 1 -->
<div data-hero-key="product-1">
  <img src="/product-thumb.jpg" alt="Product thumbnail" />
</div>

<!-- Page 2 -->
<div data-hero-key="product-1">
  <img src="/product-full.jpg" alt="Product full size" />
</div>

Configure the transition in your config:

const config = createTransitionConfig({
  transitions: [
    {
      from: '/products',
      to: '/product/*',
      transitions: transitions.hero()
    }
  ],
  defaultTransition: transitions.fade()
});

Note: For best results with hero transitions, make sure the elements with matching data-hero-key attributes have similar content and proportions.