Skip to main content

Flutter animation example

Flutter Parallax: Scrolling List With Image Parallax

Parallax inside a scrolling list makes each card feel like a window onto a bigger picture. As the list scrolls, the image inside every card moves at a fraction of the scroll speed, so it shifts within its frame. Drag the list and let go to see momentum carry it, then a gentle bounce at the ends.

  • 4.4 KB file
  • 5 live inputs
  • Flutter runtime
Live, try it

How this parallax scroll list works

  • Each image is offset by (card centre - viewport centre) × the parallax factor, clipped to its card.
  • Dragging tracks the pointer; on release the list keeps the flick velocity and decays it with friction.
  • At the ends the list overscrolls and springs back, like iOS bouncing scroll physics.

Add it to your Flutter app

Install exodeui_flutter, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';

// Add assets/flutter-parallax.exode to pubspec.yaml (download it below).
class FlutterParallax extends StatefulWidget {
  const FlutterParallax({super.key});
  @override
  State<FlutterParallax> createState() => _FlutterParallaxState();
}

class _FlutterParallaxState extends State<FlutterParallax> {
  final _canvas = GlobalKey<ExodeUICanvasState>();
  late final Future<String> _json = rootBundle.loadString('assets/flutter-parallax.exode');

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: _json,
      builder: (context, snap) => snap.hasData
          ? ExodeUICanvas(
              key: _canvas,
              artboardJson: snap.data!,
              fit: 'Layout',
              onReady: () { },
            )
          : const SizedBox.shrink(),
    );
  }
}

Inputs

InputTypeDefaultRange
factorNumber0.350 – 0.8
titlesTextPatagonia,Iceland,Namibia,Lofoten,Atacama,Dolomites—
accentText#0ea5e9hex colour
inkText#ffffffhex colour
bgText#020617hex colour

More Flutter animations

The same idea in other frameworks: React depth parallax scene · SwiftUI tilt parallax poster · JavaScript scroll reveal timeline