Flutter: Hero Animation Speed and Transition Timing

Hero animation is one of the fastest ways to improve the feel of a Flutter app. The difference between a good and a great Hero effect is usually not the animation itself, but how fast it runs and which curve it follows.

Live Demo

You can try the Hero animation in the interactive example below:

💡 If the example does not open, click the DartPad link to run it in a new tab.

Why Hero Animation Speed Matters

A well-tuned transition creates a premium, confident interface. If it is too slow, the app feels heavy. If it is too fast, users can lose context.

This is why people often search for phrases like "flutter hero animation speed" or "hero transition duration flutter". The key is not just using Hero, but timing it correctly.

Basic Hero Setup

Hero animation requires the same tag on both pages.

Hero(
  tag: 'product-image',
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
)

Use the same tag again on the destination page.

Hero(
  tag: 'product-image',
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
)

Change the Transition Duration

The simplest way to influence Hero speed is to control the route duration with PageRouteBuilder.

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 450),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
  ),
);

This lets you move the experience toward a softer or more compact transition.

Use Curve to Shape the Motion

Duration is only half the story. Curve choice changes the emotional feel of the motion.

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeOutCubic,
      );

      return FadeTransition(
        opacity: curvedAnimation,
        child: child,
      );
    },
  ),
);

Build a More Premium Motion Stack

In real products, Hero often works best with a few subtle supporting effects.

• Hero for the main visual
• Fade for supporting text
• A slight scale effect for polish
• 350-600 ms route timing for balance

That combination is especially effective in ecommerce, portfolio, and media apps.

Custom Flight Shuttle

If you want more control during the flight phase, use flightShuttleBuilder.

Hero(
  tag: 'avatar',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    return Material(
      color: Colors.transparent,
      child: ScaleTransition(
        scale: CurvedAnimation(parent: animation, curve: Curves.easeOutBack),
        child: const CircleAvatar(radius: 40, backgroundColor: Colors.blue),
      ),
    );
  },
  child: const CircleAvatar(radius: 24, backgroundColor: Colors.blue),
)

This is very useful for avatars, product images, and icon-driven transitions.

What Does createRectTween Do?

Use createRectTween to change the path the Hero takes between pages.

Hero(
  tag: 'card',
  createRectTween: (begin, end) {
    return MaterialRectArcTween(begin: begin, end: end);
  },
  child: Container(
    width: 120,
    height: 120,
    color: Colors.indigo,
  ),
)

This gives the motion a more natural arc instead of a strict straight line.

Common Mistakes

• Reusing the same tag for multiple Hero widgets
• Choosing a very long duration for a simple interaction
• Using the same curve everywhere without testing the feeling
• Letting the source and destination sizes differ too much

Practical Timing Guide

• 200-300 ms: very fast, good for micro interactions
• 350-500 ms: the safest and most balanced range
• 600 ms and above: only for dramatic or special transitions

Frequently Asked Questions

Why does my Hero animation feel slow?

Check transitionDuration first, then simplify the curve. Overly soft curves can make the motion feel slower than expected.

Do I need page transitions with Hero?

Not always, but combining them usually creates a much more polished result.

When should I avoid Hero?

Avoid it when the element changes meaning across screens or when the transition does not help users understand context.

Summary

Flutter Hero animation speed is a major part of the user experience, not a minor detail. With transitionDuration, CurvedAnimation, flightShuttleBuilder, and createRectTween, you can create a more controlled, more elegant, and more SEO-friendly Flutter article around modern motion design.