When you’re building a website for a company as ambitious as Planetaria, you need to make an impression. I wanted people to visit our website and see animations that looked more realistic than reality itself.

To make this possible, we needed to squeeze every drop of performance out of the browser we could, so we built Animaginary — the most powerful animation library for the web.

Getting started

The first step is to install Animaginary via npm:

npm install animaginary

Once installed, you can import it into your project:

import { animate } from 'animaginary';

// Animate an element
animate('#my-element', {
  opacity: [0, 1],
  transform: ['translateY(20px)', 'translateY(0)']
}, {
  duration: 1000,
  easing: 'ease-out'
});

Performance optimizations

One of the key features of Animaginary is its performance. We’ve implemented several optimizations to ensure smooth 60fps animations:

GPU acceleration - All transforms and opacity changes are hardware accelerated
Batched updates - Multiple animations are batched together to minimize reflows
Smart scheduling - Animations are scheduled using requestAnimationFrame for optimal timing

interface AnimationOptions {
  duration?: number;
  easing?: string;
  delay?: number;
  iterations?: number;
}

function animate(
  selector: string,
  keyframes: Record<string, any>,
  options?: AnimationOptions
): Animation;

Advanced features

Animaginary also includes advanced features like:

Timeline-based animations
Spring physics
Gesture recognition
Scroll-triggered animations

These features make it easy to create complex, interactive animations that respond to user input.

Conclusion

With Animaginary, we’ve created a tool that makes it possible to build the kind of animations that were previously only possible in native applications. We’re excited to see what you build with it!