meursyphus/ssgoi v3.0.0

on GitHub

ssgoi 3.0.0 - Web Animation API Performance Optimization

New Features

css Interface Added

A new css option has been added alongside the existing tick.

// Existing: tick (RAF-based)
transition({
  in: () => ({
    spring: { stiffness: 300, damping: 30 },
    tick: (progress) => {
      element.style.opacity = progress.toString();
    },
  }),
});

// New: css (Web Animation API based)
transition({
  in: () => ({
    spring: { stiffness: 300, damping: 30 },
    css: (progress) => ({
      transform: `scale(${progress})`,
      opacity: progress,
    }),
  }),
});

Performance Improvements

• Web Animation API-based animations: Pre-calculate Spring physics into Keyframe arrays, executed on compositor thread
• Reduced main thread load: Maintains 60fps even under heavy CPU load
• View Transition optimization: Most view transitions (fade, drill, slide, scroll, strip) now use css

Technical Innovation

• Spring continuity preserved: Simulation data (position + velocity) is stored, enabling natural direction changes even with Web Animation API
• Binary Search frame interpolation: O(log n) lookup for current animation state

Packages

• @ssgoi/core@3.0.0
• @ssgoi/react@3.0.0
• @ssgoi/svelte@3.0.0
• @ssgoi/vue@3.0.0
• @ssgoi/angular@3.0.0

Update

npm update @ssgoi/react
npm update @ssgoi/svelte
npm update @ssgoi/vue
npm update @ssgoi/angular

Existing tick code continues to work as before.