magic_animate 1.0.0

Beautiful animations inspired on magic.css, every animation is a customizable widget.

Magic Animate

Beautiful animations inspired on magic.css, every animation is a customizable widget.

Features

Use Flutter to fully implement the interactive effects of the Magic.css animation library

Preview Effects

Getting started

import 'package:magic_animate/magic_animate.dart';

Supported animations

    MBoingWidget
    MBombWidget
    MFoolishWidget
    MHole_outWidget
    MMagicWidget
    MOpenWidget
    MPerspectiveWidget
    MPuffWidget
    MRotateWidget
    MSlideWidget
    MSpaceWidget
    MSwapWidget
    MSwashWidget
    MTinWidget
    MTwisterInWidget
    MVanishWidget

Use

class MXXXWidget extends StatefulWidget {
  final Widget child;
  final Duration duration;
  final MagicControllerFn onController;
  final MXXXType type;
  const MXXXWidget(
      {super.key,
      required this.child,
      required this.onController,
      required this.type,
      this.duration = const Duration(milliseconds: 1000)});
}

Each widget has an onController function that returns an AnimationController, allowing you to control the animation's state yourself using the AnimationController.

  MXXXWidget(
    ...
    onController: (AnimationController controller) {
      // start animation
      controller.forward();
    }
    ...
  )