Jaemin Transition

A creative transition effect using rotation and scale

Jaemin Transition

The Jaemin transition is a creative transition effect created by Jaemin Cheon (elrion018). It provides a dramatic transition where the previous page fades out while the new page starts from a small dot and rotates to fill the entire screen.

Demo

Try navigating between tabs to see the difference:

• Home ↔ Premium ↔ Achievement: Experience the dramatic Jaemin transition with rotation and scaling
• Settings: Uses standard browser navigation (no special transition) for comparison

Notice how the Jaemin transition creates a sense of excitement and importance, while regular navigation feels more subdued - perfect for demonstrating when to use each approach.

UX Principles

When to Use?

The Jaemin transition is used to emphasize Special Moments.

Suitability by Content Relationship

Key Use Cases

• Achievement Unlocks: When users complete important milestones
• Special Features: Accessing premium or hidden content
• Celebratory Moments: Success states or rewards
• Easter Eggs: Hidden features or surprise interactions

Why Does It Work This Way?

1. Dramatic Emphasis: The rotation and scale create a sense of importance
2. Visual Delight: Unexpected motion adds personality to the interface
3. Memorable Experience: Unique transition makes moments stand out
4. Creative Expression: Shows attention to detail and craftsmanship

Motion Design

The Jaemin transition combines multiple animation techniques for a unique effect.

Outgoing Screen Motion The current screen begins to fade out gradually. This creates a soft departure that doesn't compete with the incoming animation, allowing the new content to take center stage.

The Rotation Entry The new screen emerges from the center as a tiny point, then expands outward while rotating. This spiral growth creates a sense of energy and excitement, as if the new content is bursting forth with enthusiasm.

Scale and Timing The combination of rotation and scaling is carefully timed. The rotation completes just as the screen reaches full size, creating a satisfying resolution to the animation sequence.

Basic Usage

import { Ssgoi } from '@ssgoi/react';
import { jaemin } from '@ssgoi/react/view-transitions';

const config = {
  defaultTransition: jaemin()
};

export default function App() {
  return (
    <Ssgoi config={config}>
      {/* App content */}
    </Ssgoi>
  );
}

Configuration Options

jaemin({
  spring?: {
    stiffness?: number;  // Animation spring stiffness (default: 50)
    damping?: number;    // Animation spring damping (default: 30)
  };
  initialRotation?: number;      // Initial rotation angle in degrees (default: 45)
  initialScale?: number;         // Initial scale factor (default: 0.01)
  rotationTriggerPoint?: number; // Progress point where rotation starts 0-1 (default: 0.8)
})

Practical Examples

1. Achievement Unlock

const config = {
  transitions: [
    {
      from: '/challenge-complete',
      to: '/achievement',
      transition: jaemin({ duration: 1000 })
    }
  ]
};

2. Premium Feature Access

const config = {
  transitions: [
    {
      from: '/upgrade',
      to: '/premium-features',
      transition: jaemin({ rotation: 1080 })
    }
  ]
};

Accessibility

• Respects prefers-reduced-motion settings
• Screen readers announce content changes appropriately
• Keyboard navigation remains functional during transitions

Best Practices

✅ DO

• Use for truly special moments
• Reserve for achievements and rewards
• Apply to easter eggs and surprises
• Use sparingly for maximum impact

❌ DON'T

• Don't use for regular navigation
• Avoid in frequently accessed areas
• Don't apply to error states
• Never use for critical user flows

Performance Notes

The Jaemin transition uses GPU-accelerated transforms for smooth performance. However, due to its complex animation, consider:

• Testing on lower-end devices
• Providing a simpler fallback for performance-constrained environments
• Using the prefers-reduced-motion media query for accessibility