https://twitter.com/filiphracek/status/1223033689929420801 with added option to trigger both at once

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Perception is Everything',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final a = GlobalObjectKey<_MyPerceptionState>(context),
        b = GlobalObjectKey<_MyPerceptionState>(a);

    return Material(
      color: Colors.white,
      child: FractionallySizedBox(
        heightFactor: 0.8,
        child: Container(
          constraints: BoxConstraints(maxWidth: 500),
          child: Column(
            children: <Widget>[
              InkWell(
                onTap: () {
                  a.currentState._move();
                  b.currentState._move();
                },
                child: FractionallySizedBox(
                  widthFactor: 0.5,
                  child: Text('Which of the following animations is faster? '
                      '(This is a trick question. '
                      'Read the code for the answer.)'),
                ),
              ),
              SizedBox(height: 50),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    MyPerception('A', Curves.linear, key: a),
                    SizedBox(width: 50),
                    MyPerception('B', Curves.easeOutCubic, key: b),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyPerception extends StatefulWidget {
  final String label;

  final Curve curve;

  MyPerception(this.label, this.curve, {Key key}) : super(key: key);

  @override
  _MyPerceptionState createState() => _MyPerceptionState();
}

class _MyPerceptionState extends State<MyPerception> {
  Alignment _current = Alignment.bottomCenter;
  Alignment _next = Alignment.bottomCenter;

  void _move() => setState(() {
        _current = _next;
        _next = _current == Alignment.bottomCenter
            ? Alignment.topCenter
            : Alignment.bottomCenter;
      });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FlatButton(
          onPressed: _move,
          color: Colors.black12,
          child: Text('Tap'),
        ),
        SizedBox(height: 50),
        Expanded(
          child: TweenAnimationBuilder(
            tween: AlignmentTween(
              begin: _current,
              end: _next,
            ),
            // Oh snap! The duration is exactly the same for both animations.
            duration: const Duration(milliseconds: 300),
            // It's all about the curve.
            // Linear motion generally feels more sluggish than a well chosen
            // curve (like easeOutCubic in the case of B).
            // Especially if you choose a very short path and duration!
            curve: widget.curve,
            builder: (context, alignment, child) {
              return Align(
                alignment: alignment,
                child: child,
              );
            },
            child: Container(
              width: 50,
              height: 50,
              color: Colors.black,
              child: Center(
                child:
                    Text(widget.label, style: TextStyle(color: Colors.white)),
              ),
            ),
          ),
        ),
      ],
    );
  }
}