Advanced & beautiful animations inspired by animate_do and Animate.css, every animation is a widget that contains default but customizable values 💙

Related tags

Templates animate_it
Overview

animate_it

An animation package inspired by animate_do and Animate.css.

Since the original animate_do is not being maintained, I have decided to create this package that will improve the current animations and add a LOT more animations including complex animations using Matrix4.

To see the road map, view the open issues

Showcase

Demo1 Demo2 Demo3

Available Animations

Attention Seeker

  • Bounce
  • Dance
  • Flash
  • Jello NEW
  • Pulse
  • Roulette
  • RubberBand NEW
  • ShakeX NEW
  • ShakeY NEW
  • Spin
  • SpinPerfect
  • Swing

Bouncing Entrances

  • BounceInDown
  • BounceInLeft
  • BounceInRight
  • BounceInUp

Elastic Entrances

  • ElasticIn
  • ElasticInDown
  • ElasticInLeft
  • ElasticInRight
  • ElasticInUp

Fading Entrances

  • FadeIn
  • FadeInDown
  • FadeInDownBig
  • FadeInLeft
  • FadeInLeftBig
  • FadeInRight
  • FadeInRightBig
  • FadeInUp
  • FadeInUpBig

Fading Exits

  • FadeOut
  • FadeOutDown
  • FadeOutDownBig
  • FadeOutLeft
  • FadeOutLeftBig
  • FadeOutRight
  • FadeOutRightBig
  • FadeOutUp
  • FadeOutUpBig

Flippers

  • FlipInX
  • FlipInY

Lightspeed

  • LightspeedInLeft
  • LightspeedInRight

Sliding Entrances

  • SlideInDown
  • SlideInLeft
  • SlideInRight
  • SlideInUp

Specials

  • JelloIn

Zoom Entrances

  • ZoomIn

Zoom Exits

  • ZoomOut

More to come 💪

Example

To use the animations, wrap any widget you want inside any animation widget (as seen below):

home: Scaffold(
    body: Center(
        child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
            LightSpeedInLeft(child: Text('Left')),
            ShakeX(child: Text('ShakeX')),
            ShakeY(child: Text('ShakeY')),
            LightSpeedInRight(child: Text('Right')),
            ],
        ),
    ),
),

TODO

Update documentation

Please note, A lot of these animations need work to be a bit more snappy and smooth. There is also a lot of things I want to do with this package and they will be put into issues in the GitHub repo. If you have any suggestions, please feel free to raise a ticket and I will take a look into it.

You might also like...

An advanced story viewer for Flutter. Quite easy & Quite advanced

An advanced story viewer for Flutter. Quite easy & Quite advanced

AdvStory 📸 Quite simple & Quite advanced 🚀 Advanced Story viewer for Flutter. Supports image, video and custom stories. Full control over stories fo

Sep 28, 2022

This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and SlideTransition respectively.

floating_bottom_bar This package will animate a floating action button at the center and icons at the bottomNavigationBar using AnimatedContainer and

Sep 12, 2022

Sort it - Nothing is waste, but it becomes one when it is in the wrong place ,but who has the time to sort it and put it at its right place?

Sort it - Nothing is waste, but it becomes one when it is in the wrong place ,but who has the time to sort it and put it at its right place?

Sort It ✅ Nothing is waste, but it becomes one when it is in the wrong place , ?

Sep 24, 2022

State Persistence - Persist state across app launches. By default this library store state as a local JSON file called `data.json` in the applications data directory. Maintainer: @slightfoot

State Persistence Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications dat

Sep 28, 2022

Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page 🔥 🚀 Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Sep 21, 2022

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Aris inheritedwidget - The Inherited Widget helps you to easily distribute your app state to every widget in your Flutter app

Flutter Tutorial - Inherited Widget The InheritedWidget helps you to easily dist

Dec 29, 2021

Advanced widgets, animations and more.

advanced_ui A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Aug 11, 2022

A Flutter widget for rendering HTML and CSS as Flutter widgets

A Flutter widget for rendering HTML and CSS as Flutter widgets

flutter_html A Flutter widget for rendering HTML and CSS as Flutter widgets. Screenshot 1 Screenshot 2 Screenshot 3 Table of Contents: Installing Curr

Dec 15, 2021

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying

Feb 7, 2022
Comments
  • feat: Add new animations to all categories

    feat: Add new animations to all categories

    Animation

    All categories

    Description

    As a developer, I would like a few more animations in all categories for more customizability

    Desired Solution

    Create the animations from Animate.css to begin with

    enhancement 
    opened by LukeMoody01 0
  • feat: Add exit animations

    feat: Add exit animations

    Animation

    • [ ] Back Exits
    • [ ] Boucning Exits
    • [ ] Fading Exits
    • [ ] Flippers Out
    • [ ] Lightspeed Out
    • [ ] Rotating Out
    • [ ] Specials Out
    • [ ] Zooming Exits
    • [ ] Sliding Exits

    Description

    As a developer, I also want to animate my widgets out... this could occur when navigating to another page, or we are animating between widgets and want a seemless anmimatin between them.

    Desired Solution

    Create the exit animations from Animate.css to begin with

    enhancement 
    opened by LukeMoody01 0
  • feat: Improve existing / old animations from animated_do

    feat: Improve existing / old animations from animated_do

    Animation

    All Animations:

    • [ ] Attention Seekers
    • [ ] Bounces
    • [ ] Elastics
    • [ ] Fadeouts
    • [ ] Fades
    • [ ] Flips
    • [ ] Slides
    • [ ] Specials
    • [ ] Zooms

    Description

    The current way Animations are being done is fine, but I would preferably like them a bit smoother and more animated.

    Desired Solution

    Using a MovieTween, we can add more detailed animations in a cleaner way.

    enhancement 
    opened by LukeMoody01 0
Releases(v0.0.1+2)
  • v0.0.1+2(Sep 6, 2022)

    pub.dev: https://pub.dev/packages/animate_it/versions/0.0.1+2

    Full Changelog: https://github.com/LukeMoody01/animate_it/compare/v0.0.1+1...v0.0.1+2

    Source code(tar.gz)
    Source code(zip)
  • v0.0.1+1(Sep 6, 2022)

Owner
Luke Moody
Flutter Techincal Lead | Dart, Flutter, and Firebase 🚀 💙
Luke Moody
Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Apply values per media breakpoints. Breakpoints are similar to the breakpoints used in bootstrap css framework.

Glenford Williams 4 Mar 26, 2021
🔥🚀 Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations

Flutter PinPut From Tornike ?? ?? Flutter package to create Pin code input (OTP) text field with every pixel customization possibility ?? and beautifu

Tornike 406 Sep 29, 2022
Add beautiful and trending tab indicators directly to your default Flutter TabBar

Add beautiful and trending tab indicators directly to your default Flutter TabBar. Features ?? Supports Android, iOS, Web Can be directly added to the

Adar 42 Sep 7, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 20 Aug 20, 2022
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 289 Sep 21, 2022
A grid-based layout system for Flutter, inspired by CSS Grid Layout

Flutter Layout Grid A powerful grid layout system for Flutter, optimized for complex user interface design. Click images to see their code ✨ Featuring

Felt 291 Sep 24, 2022
A replacement for Flutter's default SafeArea widget

ColorfulSafeArea A more customizable replacement for the SafeArea widget. It lets you set the color of your SafeArea without affecting the color of it

Ed 26 Aug 10, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 17 Sep 4, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Jun 12, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022