Film Transition

Cinematic transition effect for context changes between content

Film Transition

Film transition is a cinematic transition pattern used when navigating between unrelated or distant content. Similar to fade, it conveys entering a completely new area but provides a more special visual experience.

Demo

UX Principles

When to Use?

Film transition is used for Context Changes.

Suitability by Content Relationship

Key Use Cases

• Top-level Navigation: Moving between sections in bottom tabs or sidebar menus
• Context Switching: Transitions between screens with no connection points
• Starting New Tasks: Entering completely different task flows
• Special Moment Direction: When visual emphasis is needed for important screen transitions

Why Does It Work This Way?

1. Clean Separation: Creates a clear boundary between previous and new screens like fade
2. Visual Interest: More dynamic transition than simple fade to capture user attention
3. Premium Experience: Enhances app quality and polish with special transition effects

Motion Design

Film transition is inspired by the mechanism of film passing through a projector.

Outgoing Screen Motion The current screen shrinks while moving upward. Like a film frame passing through a projector lens and moving up, the screen gets smaller and feels like it's moving away from view. During this process, black margins appear around the page, making the frame boundaries clear.

Frame Interval Direction A brief interval is exposed between two screens. This represents the black gap between frames on an actual film strip, visually communicating that one scene ends and the next begins.

Incoming Screen Appearance The new screen appears from below at a small size and gradually expands while moving up. It evokes the process of a film frame reaching the projector lens and being magnified to screen size. Finally, it perfectly focuses on the screen, completing the transition.

This sequence provides users with a clear visual metaphor of "moving to a new scene" along with the romantic sensibility of analog cinema.

Basic Usage

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

const config = {
  defaultTransition: film()
};

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

Real-world Examples

1. Tab Navigation

Navigation between main sections in bottom tab bar or top tabs:

const config = {
  transitions: [
    {
      from: '/home',
      to: '/profile',
      transition: film(),
      symmetric: true
    },
    {
      from: '/home',
      to: '/settings',
      transition: film(),
      symmetric: true
    }
  ]
};

Accessibility

• Animation automatically disabled when prefers-reduced-motion is set
• Screen readers correctly recognize content changes during transitions
• Fully compatible with keyboard navigation

Best Practices

✅ DO

• Use as default for top-level navigation
• Use when content completely changes
• Use when special brand experience is needed

❌ DON'T

• Don't use for navigation between related content (use slide or scroll)
• Avoid overly complex animations (users may feel dizzy)
• Don't use for partial UI changes