Transit Kit
384 production-ready page transitions for Flutter — works with go_router, Navigator, and AnimatedSwitcher, with a three-tier override system for full control over every animation detail.
Why Transit Kit?
Most apps ship with the same two or three transitions. Transit Kit gives you 384 handcrafted, production-ready animations across 28 categories — from simple fades to cinematic reveals, physics-based springs, 3D origami folds, morphing clips, glitch effects, and cascading staggered entrances.
Every transition is:
- Drop-in — one line of code replaces your existing navigation call.
- Customizable — override duration, curve, direction, scale, blur, and more at the global, per-type, or per-call level.
- Reversible — forward and back animations are always handled automatically.
- Performant — built on Flutter's compositing layer; no expensive per-frame Dart work.
Features
- 🎬 384 unique transitions across 28 categories (fade, slide, scale, rotation, zoom, modal, blur, clip/reveal, combined, multi-stage, physics, 3D, staggered, morph, origami, swing, stack, cinematic, elastic, geometric, parallax, flip, warp, split, glitch, cascade, premium, and more)
- 🔄 Full forward & reverse animation support — back-navigation always looks right
- 📱 go_router integration via
TransitPage
- 🧭 Navigator.push support via
TransitRoute
- 🔀 AnimatedSwitcher support via
TransitSwitcher
- 🎛️ Three-tier override system — global defaults → per-type → per-call
- 🎨 Custom transition builder — drop in any
(context, animation, secondaryAnimation, child) function
- 🏗️ Registry architecture — inspect, replace, or patch any built-in transition at runtime
- ⚡ Zero dependencies beyond Flutter itself
- ✅ Production-ready — ships clean API, full documentation, and real-world examples
Demo / Preview
Live demo: transitkit-blush.vercel.app
A full demo app is included in the example/ directory. It showcases every transition with:
- Live preview of each transition playing in real time
- "See Code" button that shows the exact Dart snippet to reproduce it
- Category browser — browse all 384 transitions organized by category
- Search — find any transition by name
To run the demo locally:
cd example
flutter run
Installation
Add transit_kit to your pubspec.yaml:
dependencies:
transit_kit: ^1.0.1
Then run:
flutter pub get
Import it once in any file that needs it:
import 'package:transit_kit/transit_kit.dart';
Quick Start
Pick the integration style that matches your routing setup.
With go_router
Replace GoRoute's builder with a pageBuilder that returns a TransitPage:
import 'package:go_router/go_router.dart';
import 'package:transit_kit/transit_kit.dart';
final router = GoRouter(
routes: [
GoRoute(
path: '/',
pageBuilder: (context, state) => TransitPage(
key: state.pageKey,
type: TransitType.fade,
child: const HomeScreen(),
),
routes: [
GoRoute(
path: 'details',
pageBuilder: (context, state) => TransitPage(
key: state.pageKey,
type: TransitType.slideRight,
child: const DetailScreen(),
),
),
],
),
],
);
With Navigator.push
Navigator.of(context).push(
TransitRoute(
type: TransitType.fadeScale,
builder: (context) => const DetailScreen(),
),
);
Navigator.of(context).pushTransit(
TransitType.cupertino,
builder: (context) => const DetailScreen(),
);
With AnimatedSwitcher
TransitSwitcher animates between child widgets on the same screen — perfect for tabs, dashboards, or content areas:
TransitSwitcher(
type: TransitType.fadeThrough,
child: _currentSection, // must have a unique Key
)
Tip: Each child must carry a unique Key so the switcher detects changes.
Choosing a Transition
With 384 options it helps to know where to start. Here are the most commonly used transitions:
| Use Case |
TransitType |
Description |
| General navigation |
fadeScale |
Subtle fade + scale — professional default |
| iOS-style navigation |
cupertino |
Slide from right with outgoing parallax |
| Bottom sheet / modal |
modalBottom |
Slides up from the bottom |
| Material fade-through |
fadeThrough |
Material Design fade-through pattern |
| Material shared axis |
sharedAxisX |
Horizontal shared-axis (great for wizards) |
| Detail pages |
slideRight |
Clean directional slide |
| Login → Dashboard |
fadeScale |
Smooth replacement transition |
| Onboarding steps |
sharedAxisX |
Consistent horizontal flow |
| Photo / media |
zoomIn |
Immersive zoom-in entrance |
| Settings |
slideRight |
Familiar navigation feel |
| Dramatic effect |
cinematicReveal |
Letterbox bars + fade |
| Physics feel |
springIn |
Spring overshoot entrance |
Customization
Per-call overrides
Every API accepts duration, curve, reverseDuration, reverseCurve, and an overrides object:
Navigator.of(context).push(
TransitRoute(
type: TransitType.fadeScale,
duration: const Duration(milliseconds: 500),
curve: Curves.easeOutCubic,
overrides: const TransitionOverride(beginScale: 0.5),
builder: (context) => const DetailScreen(),
),
);
The same parameters are available on TransitPage and TransitSwitcher.
Global defaults
Set app-wide defaults once in main() before runApp():
void main() {
GlobalTransitionConfig.instance.setDefaults(
const TransitionOverride(
duration: Duration(milliseconds: 350),
curve: Curves.easeOutCubic,
),
);
runApp(const MyApp());
}
Per-type overrides
Override a specific transition type across the entire app:
// Slow down all modal-bottom transitions
GlobalTransitionConfig.instance.setOverrideFor(
TransitType.modalBottom,
const TransitionOverride(
duration: Duration(milliseconds: 500),
curve: Curves.easeOutQuart,
),
);
Override resolution order
global defaults → per-type override → per-call override
Each tier only overrides non-null values. A per-call override of just curve will inherit duration from the per-type (or global) tier.
All overridable fields
| Field |
Type |
Description |
duration |
Duration? |
Forward animation duration |
reverseDuration |
Duration? |
Reverse animation duration |
curve |
Curve? |
Forward animation curve |
reverseCurve |
Curve? |
Reverse animation curve |
alignment |
Alignment? |
Origin point for scale / rotation |
beginOffset |
Offset? |
Starting offset for slide transitions |
endOffset |
Offset? |
Ending offset for slide transitions |
beginScale |
double? |
Starting scale factor |
endScale |
double? |
Ending scale factor |
beginOpacity |
double? |
Starting opacity |
endOpacity |
double? |
Ending opacity |
rotationAngle |
double? |
Rotation angle in radians |
blurSigma |
double? |
Blur sigma value |
axis |
Axis? |
Animation axis |
direction |
AxisDirection? |
Animation direction |
Custom Transitions
One-off custom transition
Pass any Flutter transition builder directly:
Navigator.of(context).push(
TransitRoute.custom(
transitionBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: Tween<double>(begin: 0.8, end: 1.0).animate(animation),
child: child,
),
);
},
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutBack,
builder: (context) => const DetailScreen(),
),
);
Custom transition with go_router
GoRoute(
path: '/custom',
pageBuilder: (context, state) => TransitPage(
key: state.pageKey,
transitionBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, 0.3),
end: Offset.zero,
).animate(CurvedAnimation(parent: animation, curve: Curves.easeOutCubic)),
child: FadeTransition(opacity: animation, child: child),
);
},
duration: const Duration(milliseconds: 400),
child: const CustomScreen(),
),
)
When transitionBuilder is set, the type parameter is ignored.
Reusable transition preset
Define a builder once and reuse it anywhere:
Widget cardPopTransition(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) {
return ScaleTransition(
scale: Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(parent: animation, curve: Curves.elasticOut),
),
child: FadeTransition(opacity: animation, child: child),
);
}
// Use with Navigator
Navigator.of(context).push(
TransitRoute.custom(
transitionBuilder: cardPopTransition,
duration: const Duration(milliseconds: 500),
builder: (context) => const DetailScreen(),
),
);
// Use with go_router
GoRoute(
path: '/card',
pageBuilder: (context, state) => TransitPage(
key: state.pageKey,
transitionBuilder: cardPopTransition,
duration: const Duration(milliseconds: 500),
child: const CardScreen(),
),
)
Registry API
Inspect, replace, or patch any built-in transition at runtime.
Read a transition's config
final config = TransitRegistry.of(TransitType.fade);
print(config.duration); // Duration(milliseconds: 300)
print(config.curve); // Curves.easeInOut
Replace a transition's implementation
TransitRegistry.override(
TransitType.fade,
TransitConfig(
builder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: CurvedAnimation(parent: animation, curve: Curves.easeOutExpo),
child: child,
);
},
duration: const Duration(milliseconds: 250),
curve: Curves.easeOutExpo,
),
);
Patch only specific properties
TransitRegistry.override(
TransitType.slideRight,
TransitRegistry.of(TransitType.slideRight).copyWith(
duration: const Duration(milliseconds: 350),
curve: Curves.easeOutBack,
),
);
Reset to built-in defaults
TransitRegistry.reset();
GlobalTransitionConfig.instance.reset();
Advanced Patterns
TransitType get platformTransition {
return Platform.isIOS ? TransitType.cupertino : TransitType.fadeSlideRight;
}
Navigation helper class
class AppNavigator {
static Future<T?> pushDetail<T>(BuildContext context, Widget page) =>
Navigator.of(context).push(TransitRoute<T>(
type: TransitType.cupertino,
builder: (_) => page,
));
static Future<T?> presentModal<T>(BuildContext context, Widget page) =>
Navigator.of(context).push(TransitRoute<T>(
type: TransitType.modalBottom,
fullscreenDialog: true,
builder: (_) => page,
));
static Future<T?> replace<T extends Object?, TO extends Object?>(
BuildContext context,
Widget page,
) =>
Navigator.of(context).pushReplacement(TransitRoute<T>(
type: TransitType.fadeScale,
duration: const Duration(milliseconds: 400),
builder: (_) => page,
));
}
User-configurable transition speed
enum TransitionPreference { smooth, snappy, minimal, none }
void applyPreference(TransitionPreference pref) {
switch (pref) {
case TransitionPreference.smooth:
GlobalTransitionConfig.instance.setDefaults(
const TransitionOverride(duration: Duration(milliseconds: 400), curve: Curves.easeOutCubic),
);
case TransitionPreference.snappy:
GlobalTransitionConfig.instance.setDefaults(
const TransitionOverride(duration: Duration(milliseconds: 200), curve: Curves.easeOut),
);
case TransitionPreference.none:
GlobalTransitionConfig.instance.setDefaults(
const TransitionOverride(duration: Duration.zero),
);
case TransitionPreference.minimal:
GlobalTransitionConfig.instance.setDefaults(
const TransitionOverride(duration: Duration(milliseconds: 150)),
);
}
}
All 384 Transitions
Fade (10)
| Type |
Description |
fade |
Simple opacity fade between pages |
fadeScale |
Fade combined with a subtle scale-up effect |
fadeThrough |
Material Design fade-through pattern |
crossFade |
Smooth cross-dissolve between pages |
fadeSlideUp |
Fade in while sliding upward from below |
fadeSlideDown |
Fade in while sliding downward from above |
fadeSlideRight |
Fade in while sliding from the left |
fadeSlideLeft |
Fade in while sliding from the right |
fadeRotate |
Fade in combined with a rotation |
fadeBlur |
Fade in with a blur-to-sharp focus effect |
Slide (16)
| Type |
Description |
slideRight |
Slide incoming page from the right edge |
slideLeft |
Slide incoming page from the left edge |
slideUp |
Slide incoming page from the bottom edge |
slideDown |
Slide incoming page from the top edge |
slideRightFade |
Slide from the right with a simultaneous fade |
slideLeftFade |
Slide from the left with a simultaneous fade |
slideUpFade |
Slide from the bottom with a simultaneous fade |
slideDownFade |
Slide from the top with a simultaneous fade |
slideRightScale |
Slide from the right with a scale effect |
slideLeftScale |
Slide from the left with a scale effect |
slideUpScale |
Slide from the bottom with a scale effect |
slideDownScale |
Slide from the top with a scale effect |
slideRightBounce |
Slide from the right with a bounce at the end |
slideLeftBounce |
Slide from the left with a bounce at the end |
slideUpBounce |
Slide from the bottom with a bounce at the end |
slideDownBounce |
Slide from the top with a bounce at the end |
Scale (10)
| Type |
Description |
scaleUp |
Scale up from a small size to full |
scaleDown |
Scale down from a large size to normal |
scaleUpFade |
Scale up combined with a fade-in |
scaleCenter |
Scale from the center point outward |
scaleUpRotate |
Scale up with a simultaneous rotation |
scaleDownFade |
Scale down combined with a fade-out |
scaleBounce |
Scale with a bouncy overshoot effect |
scaleElastic |
Scale with an elastic spring effect |
scaleTopLeft |
Scale originating from the top-left corner |
scaleBottomRight |
Scale originating from the bottom-right corner |
Rotation (9)
| Type |
Description |
rotate |
Full 360° rotation transition |
rotateScale |
Rotation combined with a scale effect |
rotateFade |
Rotation combined with a fade-in |
rotateClockwise |
Clockwise rotation entrance |
rotateCounterClockwise |
Counter-clockwise rotation entrance |
rotateScaleFade |
Rotation with scale and fade combined |
rotateSlide |
Rotation combined with a lateral slide |
halfRotate |
180° flip entrance |
quarterTurn |
90° rotation entrance |
Zoom (7)
| Type |
Description |
zoomIn |
Zoom in from the center |
zoomOut |
Zoom out from a large scale |
zoomFade |
Zoom combined with a fade-in |
zoomInSlide |
Zoom in with a simultaneous slide |
zoomOutSlide |
Zoom out with a simultaneous slide |
zoomBounce |
Zoom with a bouncy overshoot effect |
zoomRotate |
Zoom combined with a rotation |
Directional / Modal (12)
| Type |
Description |
cupertino |
iOS-style slide from right with outgoing parallax |
cupertinoFade |
iOS-style slide combined with a fade |
modalBottom |
Bottom sheet-style modal slide up |
modalTop |
Top sheet-style modal slide down |
modalLeft |
Sheet-style modal slide from the left edge |
modalRight |
Sheet-style modal slide from the right edge |
sharedAxisX |
Material shared-axis horizontal transition |
sharedAxisY |
Material shared-axis vertical transition |
sharedAxisZ |
Material shared-axis depth / scale transition |
sharedAxisXReverse |
Material shared-axis X in reverse direction |
sharedAxisYReverse |
Material shared-axis Y in reverse direction |
drawerLeft |
Drawer-style slide from the left with overlay |
Advanced (10)
| Type |
Description |
flipHorizontal |
Horizontal 3D flip between pages |
flipVertical |
Vertical 3D flip between pages |
elastic |
Elastic spring-based entrance animation |
parallax |
Parallax slide with depth effect between layers |
size |
Size-based clip transition for the incoming page |
cardFlip |
Combined slide and scale for a card-style flip |
flipDiagonal |
Diagonal 3D flip from corner to corner |
flipCard3D |
Full 3D card flip with perspective depth |
cubeRotateHorizontal |
3D cube rotation along the horizontal axis |
cubeRotateVertical |
3D cube rotation along the vertical axis |
Blur (6)
| Type |
Description |
blurFadeIn |
Blur-to-clear fade-in entrance |
blurFadeOut |
Clear-to-blur fade-out exit effect |
blurSlideRight |
Blur effect sliding in from the right |
blurSlideUp |
Blur effect sliding in from below |
blurScale |
Blur combined with a scale entrance |
blurRotate |
Blur combined with a rotation entrance |
Clip / Reveal (10)
| Type |
Description |
circularReveal |
Circular reveal expanding from a point |
circularRevealCenter |
Circular reveal expanding from the screen center |
rectangleReveal |
Rectangular reveal expanding outward |
verticalWipe |
Vertical wipe reveal from top to bottom |
horizontalWipe |
Horizontal wipe reveal from left to right |
diagonalWipe |
Diagonal wipe reveal from corner to corner |
irisIn |
Iris-in effect contracting to reveal the new page |
irisOut |
Iris-out effect expanding to reveal the new page |
curtainHorizontal |
Horizontal curtain-open reveal from the center |
curtainVertical |
Vertical curtain-open reveal from the center |
Combined (12)
| Type |
Description |
fadeScaleSlide |
Fade, scale, and slide combined in one transition |
fadeScaleRotate |
Fade, scale, and rotation combined |
slideScaleRotate |
Slide, scale, and rotation combined |
fadeSlideScale |
Fade with slide followed by a scale effect |
slideFadeBlur |
Slide with fade and blur combined |
scaleRotateFade |
Scale with rotation and fade combined |
zoomFadeSlide |
Zoom with fade and slide combined |
elasticSlideRight |
Elastic spring slide from the right |
elasticSlideUp |
Elastic spring slide from below |
elasticScale |
Elastic spring scale entrance |
bounceFadeScale |
Bounce with fade and scale combined |
springSlideRight |
Spring physics slide from the right |
Multi-Stage (10)
| Type |
Description |
fadeInThenSlide |
Fades in first, then slides into position |
slideThenFade |
Slides in first, then fades to full opacity |
scaleThenSlide |
Scales in first, then slides into position |
rotateThenFade |
Rotates in first, then fades to full opacity |
zoomThenFade |
Zooms in first, then fades to full opacity |
slideThenScale |
Slides in first, then scales to final size |
fadeThenScale |
Fades in first, then scales to final size |
blurThenFade |
Blurs in first, then fades to full clarity |
wipeThenFade |
Wipes in first, then fades to full opacity |
revealThenScale |
Reveals first, then scales to final size |
Physics (8)
| Type |
Description |
springIn |
Spring physics entrance with overshoot |
springOut |
Spring physics exit with overshoot |
bounceDrop |
Bounce drop from the top with gravity simulation |
bounceSlideRight |
Bounce slide entrance from the right |
bounceSlideUp |
Bounce slide entrance from below |
gravityDrop |
Gravity-based drop from the top of the screen |
rubberBand |
Rubber-band stretch and snap entrance |
swingIn |
Swing-in entrance like a pendulum |
3D (8)
| Type |
Description |
perspectiveTiltLeft |
Perspective tilt from the left edge |
perspectiveTiltRight |
Perspective tilt from the right edge |
perspectiveTiltUp |
Perspective tilt from the top edge |
perspectiveTiltDown |
Perspective tilt from the bottom edge |
doorOpenLeft |
Door-open effect hinged on the left side |
doorOpenRight |
Door-open effect hinged on the right side |
foldHorizontal |
Horizontal fold like closing a book |
foldVertical |
Vertical fold like closing a laptop lid |
Staggered (56)
| Type |
Description |
staggeredFadeSlide |
Staggered fade and slide for list-like entrances |
staggeredScale |
Staggered scale for grid-like entrances |
rippleReveal |
Ripple reveal expanding from a touch point |
pixelDissolve |
Pixel dissolve effect between pages |
windmill |
Windmill rotation entrance from the center |
carousel |
Carousel-style rotation between pages |
staggeredFadeScale |
Fade then scale with stagger |
staggeredSlideRotate |
Slide then rotate with stagger |
staggeredScaleFade |
Scale then fade with stagger |
staggeredRotateSlide |
Rotate then slide with stagger |
staggeredFadeRotate |
Fade then rotate with stagger |
staggeredSlideScale |
Slide then scale with stagger |
staggeredScaleRotate |
Scale then rotate with stagger |
staggeredFadeSlideDown |
Fade with slide from top |
staggeredFadeSlideLeft |
Fade with slide from right |
staggeredFadeSlideRight |
Fade with slide from left |
staggeredScaleSlide |
Scale then slide with stagger |
staggeredScaleSlideUp |
Scale with slide upward |
staggeredScaleSlideDown |
Scale with slide downward |
staggeredRotateFade |
Rotate then fade with stagger |
staggeredRotateScale |
Rotate then scale with stagger |
staggeredFadeScaleRotate |
Fade, scale, then rotate |
staggeredSlideScaleFade |
Slide, scale, then fade |
staggeredScaleFadeSlide |
Scale, fade, then slide |
staggeredRotateFadeScale |
Rotate, fade, then scale |
staggeredFadeSlideRotate |
Fade, slide, then rotate |
staggeredZoomFade |
Zoom then fade with stagger |
staggeredZoomSlide |
Zoom then slide with stagger |
staggeredZoomRotate |
Zoom then rotate with stagger |
staggeredFadeZoom |
Fade then zoom with stagger |
staggeredSlideZoom |
Slide then zoom with stagger |
staggeredBounceIn |
Bounce-in entrance with stagger |
staggeredBounceSlide |
Bounce with slide stagger |
staggeredBounceScale |
Bounce with scale stagger |
staggeredBounceFade |
Bounce with fade stagger |
staggeredElasticScale |
Elastic scale with stagger |
staggeredElasticSlide |
Elastic slide with stagger |
staggeredElasticFade |
Elastic fade with stagger |
staggeredFlipFade |
Flip then fade with stagger |
staggeredFlipSlide |
Flip then slide with stagger |
staggeredFlipScale |
Flip then scale with stagger |
staggeredTiltFade |
Tilt then fade with stagger |
staggeredTiltSlide |
Tilt then slide with stagger |
staggeredTiltScale |
Tilt then scale with stagger |
staggeredSwingFade |
Swing then fade with stagger |
staggeredSwingSlide |
Swing then slide with stagger |
staggeredExpandFade |
Expand then fade with stagger |
staggeredExpandSlide |
Expand then slide with stagger |
staggeredShrinkFade |
Shrink then fade with stagger |
staggeredShrinkSlide |
Shrink then slide with stagger |
staggeredWaveFade |
Wave-like fade with stagger |
staggeredWaveSlide |
Wave-like slide with stagger |
staggeredWaveScale |
Wave-like scale with stagger |
staggeredSpiralIn |
Spiral-in entrance with stagger |
staggeredDropBounce |
Drop with bounce stagger |
staggeredRiseFade |
Rise then fade with stagger |
Morph (18)
| Type |
Description |
morphExpand |
Circular clip expanding from center point |
morphContract |
Contracts to center then expands revealing new page |
morphTopReveal |
Clip rect expanding from top edge downward |
morphBottomReveal |
Clip rect expanding from bottom edge upward |
morphLeftReveal |
Clip rect expanding from left edge rightward |
morphRightReveal |
Clip rect expanding from right edge leftward |
morphDiamondReveal |
Diamond shape clip expanding from center |
morphCrossExpand |
Cross shape clip expanding from center |
morphSplitHorizontal |
Page splits into left / right halves |
morphSplitVertical |
Page splits into top / bottom halves |
morphSplitDiagonal |
Diagonal split with two triangles sliding apart |
morphSqueezeLeft |
Current page squeezes left while new slides in |
morphSqueezeRight |
Current page squeezes right while new slides in |
morphSqueezeUp |
Current page squeezes up while new slides in |
morphSqueezeDown |
Current page squeezes down while new slides in |
morphStretchHorizontal |
New page stretches horizontally from center line |
morphStretchVertical |
New page stretches vertically from center line |
morphPinchReveal |
Pinch-like radial clip from corners converging then expanding |
Origami (14)
| Type |
Description |
origamiFoldLeft |
Folds like paper from left edge with 3D perspective |
origamiFoldRight |
Folds like paper from right edge |
origamiFoldUp |
Folds upward from top edge |
origamiFoldDown |
Folds downward from bottom edge |
pageTurnLeft |
Page turning effect from left edge |
pageTurnRight |
Page turning effect from right edge |
accordionHorizontal |
Horizontal accordion fold with perspective |
accordionVertical |
Vertical accordion fold with perspective |
fanOpenLeft |
Fan open from left anchor |
fanOpenRight |
Fan open from right anchor |
envelopeOpen |
Top half folds up revealing content beneath |
bookOpenLeft |
Left half opens like a book cover |
bookOpenRight |
Right half opens like a book cover |
rollReveal |
Rolling reveal from top to bottom |
Swing (10)
| Type |
Description |
swingInLeft |
Swings in from left anchor with damped oscillation |
swingInRight |
Swings in from right anchor |
swingInTop |
Swings in from top anchor |
swingInBottom |
Swings in from bottom anchor |
pendulumLeft |
Pendulum swing from top-left corner |
pendulumRight |
Pendulum swing from top-right corner |
hingeOpen |
Hinge opens like a trapdoor from top edge |
hingeClose |
Reverse hinge closing from bottom |
gateOpen |
Two halves rotate outward like gates |
gateClose |
Gates closing inward revealing new page |
revolverSpin |
Full 360° spin with scale and fade |
clapboardReveal |
Film clapboard fold down then fade to new page |
Stack (12)
| Type |
Description |
stackPushUp |
New page pushes up from bottom while current scales down |
stackPushDown |
New page pushes down from top while current scales down |
stackPushLeft |
New page pushes from left while current scales down |
stackPushRight |
New page pushes from right while current scales down |
deckShuffle |
Card shuffled to front with rotation and scale |
cardDealLeft |
Card dealt from left with arc offset |
cardDealRight |
Card dealt from right with arc offset |
layerPeelLeft |
Current page peels away to left revealing new page |
layerPeelRight |
Current page peels away to right |
depthPush |
Current page pushes back in Z-depth as new scales in |
depthPull |
New page pulls forward from back |
coverSlideDown |
New page covers from top sliding down |
Cinematic (14)
| Type |
Description |
dollyZoomIn |
Dolly zoom in with perspective (vertigo effect) |
dollyZoomOut |
Reverse dolly zoom out |
whipPanLeft |
Fast whip pan to left |
whipPanRight |
Fast whip pan to right |
flashWhite |
Flash to white then reveal |
flashBlack |
Flash to black then reveal |
crossZoom |
Cross zoom between pages |
zoomBlur |
Zoom with decreasing blur |
cinematicBars |
Letterbox bars retract revealing page |
spotlightReveal |
Spotlight circular reveal from center |
vignetteFade |
Vignette darkening fade with oval clip |
lensFocusIn |
Lens focus in from blur |
lensFocusOut |
Lens focus out from sharp |
pushFocus |
Push focus with slide and blur |
Elastic (12)
| Type |
Description |
jellyBounceIn |
Jelly-like bounce entrance with non-uniform oscillation |
jellySlideRight |
Jelly slide from right with bounce |
jellySlideLeft |
Jelly slide from left with bounce |
jellySlideUp |
Jelly slide from bottom with bounce |
wobbleIn |
Wobble entrance with alternating rotation and scale |
wobbleFade |
Wobble with fade and oscillating rotation |
squishHorizontal |
Horizontal squish with spring back |
squishVertical |
Vertical squish with spring back |
trampolineIn |
Trampoline bounce from top |
rubberSnapLeft |
Rubber snap from far left with oscillation |
rubberSnapRight |
Rubber snap from far right |
springScaleRotate |
Spring with scale oscillation and rotation |
Geometric (16)
| Type |
Description |
triangleReveal |
Triangle clip expanding from center |
hexagonReveal |
Hexagonal clip expanding from center |
diamondWipe |
Diamond-shaped wipe expanding from center |
chevronWipe |
Chevron-shaped wipe from left to right |
zigzagWipeHorizontal |
Zigzag edge wipe from left to right |
zigzagWipeVertical |
Zigzag edge wipe from top to bottom |
spiralRevealIn |
Spiral clip winding inward |
spiralRevealOut |
Spiral clip winding outward from center |
gridReveal |
Grid of rectangles appearing progressively |
mosaicReveal |
Mosaic tiles appearing in staggered order |
blindsHorizontalReveal |
Horizontal blinds strips widening |
blindsVerticalReveal |
Vertical blinds strips widening |
checkerboardReveal |
Checkerboard pattern appearing in two phases |
pinwheelReveal |
Pinwheel rotating sections revealed in sequence |
starReveal |
Star shape expanding from center |
crossShapeReveal |
Cross / plus shape expanding from center |
Parallax Extended (12)
| Type |
Description |
parallaxSlideLeft |
Parallax slide from right with depth offset |
parallaxSlideRight |
Parallax slide from left with depth offset |
parallaxSlideUp |
Parallax slide from bottom with depth offset |
parallaxSlideDown |
Parallax slide from top with depth offset |
parallaxScaleIn |
Parallax scale with outgoing page shrinking |
parallaxFadeIn |
Parallax fade with outgoing page shifting |
depthFadeIn |
Depth fade in with scale from 0.8 to 1.0 |
depthFadeOut |
Depth fade out with outgoing scaling down |
tunnelZoomIn |
Tunnel zoom in toward new page |
tunnelZoomOut |
Tunnel zoom out from current page |
layeredSlideLeft |
Layered slide left with 3D stack effect |
layeredSlideRight |
Layered slide right with 3D stack effect |
Flip Extended (12)
| Type |
Description |
flipLeftIn |
3D flip entering from left |
flipRightIn |
3D flip entering from right |
flipUpIn |
3D flip entering from top |
flipDownIn |
3D flip entering from bottom |
flipTopLeftIn |
Diagonal flip from top-left corner |
flipBottomRightIn |
Diagonal flip from bottom-right corner |
doubleFlipHorizontal |
Double flip horizontal in two stages |
doubleFlipVertical |
Double flip vertical in two stages |
cascadeFlipHorizontal |
Cascading flips settling to position |
rolodexDown |
Rolodex scroll downward |
rolodexUp |
Rolodex scroll upward |
cubeRotateDiagonal |
Cube rotation on diagonal axis |
Warp (12)
| Type |
Description |
fishEyeIn |
Fish-eye zoom in with distortion |
fishEyeOut |
Fish-eye zoom out with distortion |
twirlIn |
Twirl / vortex in with rotation and scale |
twirlOut |
Reverse twirl out |
skewSlideLeft |
Skew slide from left with horizontal skew |
skewSlideRight |
Skew slide from right |
skewSlideUp |
Skew slide from bottom with vertical skew |
skewSlideDown |
Skew slide from top |
stretchIn |
Stretches in from a thin vertical line |
compressOut |
Stretches in from a thin horizontal line |
perspectiveZoomIn |
Perspective zoom in from far away |
perspectiveZoomOut |
Perspective zoom out |
Split (14)
| Type |
Description |
splitHorizontalOpen |
Left and right halves slide apart horizontally |
splitHorizontalClose |
Two halves slide in from left and right edges |
splitVerticalOpen |
Top and bottom halves slide apart vertically |
splitVerticalClose |
Two halves slide in from top and bottom |
splitDiagonalOpen |
Diagonal split with triangles sliding apart |
splitFourWay |
Four quadrants slide outward to corners |
splitCorners |
Four corner triangles peel away from center |
tearLeft |
Page tears from left edge |
tearRight |
Page tears from right edge |
tearTop |
Page tears from top edge |
tearBottom |
Page tears from bottom edge |
peelTopLeft |
Corner peel from top-left |
peelTopRight |
Corner peel from top-right |
peelBottomLeft |
Corner peel from bottom-left |
Glitch (14)
| Type |
Description |
glitchHorizontal |
Horizontal glitch with offset strips |
glitchVertical |
Vertical glitch with offset strips |
glitchFade |
Glitch with fade effect |
scanLineReveal |
Scan line moving from top to bottom |
pixelateIn |
Pixelate effect with expanding grid |
interlaceReveal |
Interlaced lines reveal |
shutterHorizontal |
Camera shutter horizontal bars |
shutterVertical |
Camera shutter vertical bars |
sliceHorizontal |
Horizontal slices sliding from alternating sides |
sliceVertical |
Vertical slices sliding from alternating sides |
stripRevealLeft |
Vertical strips appearing from left |
stripRevealRight |
Vertical strips appearing from right |
stripRevealUp |
Horizontal strips appearing from bottom |
stripRevealDown |
Horizontal strips appearing from top |
Cascade (14)
| Type |
Description |
cascadeFadeLeft |
Cascade fade from left with sequential columns |
cascadeFadeRight |
Cascade fade from right |
cascadeFadeUp |
Cascade fade upward with sequential rows |
cascadeFadeDown |
Cascade fade downward |
cascadeScaleIn |
Cascade scale in with sequential quadrants |
cascadeRotateIn |
Cascade rotate in with sequential quadrants |
dominoLeft |
Domino fall from left with tilting strips |
dominoRight |
Domino fall from right |
waterfallDown |
Waterfall cascade downward with delayed rows |
waterfallUp |
Waterfall cascade upward |
stairStepLeft |
Stair step from left with diagonal delay |
stairStepRight |
Stair step from right |
waveMotionLeft |
Wave motion from left with sine offset |
waveMotionRight |
Wave motion from right |
Premium (26)
| Type |
Description |
heroScale |
Hero-like scale from center with drift |
materialElevation |
Material elevation rise with shadow |
containerTransform |
Material container transform with border radius |
sharedAxisFade |
Shared axis with fade along configurable axis |
elasticOvershoot |
Dramatic elastic overshoot with damped oscillation |
smoothPopIn |
Smooth pop in with clean scale entrance |
smoothPopOut |
Smooth pop out with settling effect |
cinematicReveal |
Cinematic reveal with letterbox bars and fade |
neonGlow |
Neon glow with scale pulse emphasis |
frostedGlass |
Frosted glass clearing with blur and scale |
slideOverLeft |
Slide over from right on top of current page |
slideOverRight |
Slide over from left on top |
slideOverUp |
Slide over from bottom on top |
slideOverDown |
Slide over from top on top |
pushSlideLeft |
Push slide left: both pages move |
pushSlideRight |
Push slide right: both pages move |
pushSlideUp |
Push slide up: both pages move |
pushSlideDown |
Push slide down: both pages move |
revealSlideLeft |
Reveal by current page sliding left |
revealSlideRight |
Reveal by current page sliding right |
zoomSlideLeft |
Zoom with slide from right |
zoomSlideRight |
Zoom with slide from left |
fadeZoomIn |
Deep fade zoom in from far away |
fadeZoomOut |
Fade zoom out backing away to see new page |
API Reference
TransitPage
A CustomTransitionPage for use with go_router (and any declarative router based on Page).
| Parameter |
Type |
Description |
key |
LocalKey |
Required. Use state.pageKey in go_router. |
type |
TransitType |
The transition to apply. |
child |
Widget |
The destination widget. |
duration |
Duration? |
Forward animation duration. |
reverseDuration |
Duration? |
Reverse animation duration. |
curve |
Curve? |
Forward animation curve. |
reverseCurve |
Curve? |
Reverse animation curve. |
overrides |
TransitionOverride? |
Per-call override object. |
transitionBuilder |
TransitBuilder? |
Custom builder — overrides type. |
name |
String? |
Optional route name. |
fullscreenDialog |
bool |
Whether this is a full-screen dialog. |
TransitRoute
A PageRoute for use with Navigator.push, pushReplacement, pushAndRemoveUntil, etc.
| Parameter |
Type |
Description |
type |
TransitType |
The transition to apply. |
builder |
WidgetBuilder |
Builds the destination widget. |
duration |
Duration? |
Forward animation duration. |
reverseDuration |
Duration? |
Reverse animation duration. |
curve |
Curve? |
Forward animation curve. |
reverseCurve |
Curve? |
Reverse animation curve. |
overrides |
TransitionOverride? |
Per-call override object. |
fullscreenDialog |
bool |
Whether this is a full-screen dialog. |
Use TransitRoute.custom(transitionBuilder: ...) to supply a custom builder instead of a preset type.
TransitSwitcher
A drop-in replacement for AnimatedSwitcher.
| Parameter |
Type |
Description |
type |
TransitType |
The transition to apply. |
child |
Widget |
The current child — must have a unique Key. |
duration |
Duration? |
Animation duration. |
reverseDuration |
Duration? |
Reverse animation duration. |
curve |
Curve? |
Animation curve. |
overrides |
TransitionOverride? |
Per-call override object. |
Navigator extension
// Push
Navigator.of(context).pushTransit(TransitType.slideRight, builder: (context) => ...);
// Push replacement
Navigator.of(context).pushReplacementTransit(TransitType.fadeScale, builder: (context) => ...);
// Push and remove until
Navigator.of(context).pushAndRemoveUntilTransit(TransitType.fade, builder: (context) => ..., predicate: (_) => false);
GlobalTransitionConfig
Singleton — access via GlobalTransitionConfig.instance.
| Method |
Description |
setDefaults(override) |
Set app-wide default overrides. |
setOverrideFor(type, override) |
Set an override for a specific TransitType. |
clearOverrideFor(type) |
Remove the override for a specific TransitType. |
reset() |
Reset all global configuration. |
TransitRegistry
| Method |
Description |
TransitRegistry.of(type) |
Get the TransitConfig for a transition type. |
TransitRegistry.override(type, config) |
Replace or patch a transition's config. |
TransitRegistry.reset() |
Restore all built-in defaults. |
Documentation
Detailed guides are available in the docs/ directory:
Requirements
| Requirement |
Version |
| Flutter |
≥ 3.10.0 |
| Dart SDK |
≥ 3.0.0 |
Transit Kit has zero runtime dependencies beyond the Flutter SDK.
License
Transit Kit is released under the MIT License.
