https://github.com/klerith/animate_do_package
Animate_do Package
https://github.com/klerith/animate_do_package
animations dart fernandoherrera flutter
Last synced: 3 months ago
JSON representation
Animate_do Package
- Host: GitHub
- URL: https://github.com/klerith/animate_do_package
- Owner: Klerith
- License: mit
- Created: 2020-02-18T17:18:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-05T14:48:19.000Z (over 1 year ago)
- Last Synced: 2025-04-02T21:37:51.305Z (over 1 year ago)
- Topics: animations, dart, fernandoherrera, flutter
- Language: Dart
- Homepage: https://pub.dev/packages/animate_do
- Size: 6.17 MB
- Stars: 327
- Watchers: 8
- Forks: 38
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# animate_do
> A Flutter animation package inspired by [Animate.css](https://daneden.github.io/animate.css/), built with zero external dependencies.
---
## Getting Started
Every animation widget ships with sensible defaults and is fully customizable. Drop it around any widget and you're done.
---
## Properties
| Property | Type | Description |
| --------------- | ------------ | -------------------------------------------------------------------------------------------------- |
| `key` | **Key** | Optional widget key reference |
| `child` | **Widget** | Required widget to animate |
| `duration` | **Duration** | Duration of the animation |
| `delay` | **Duration** | Delay before the animation starts |
| `from` | **double** | Initial or final value for more pronounced slide/fade effects |
| `animate` | **bool** | Toggle `false` → `true` to trigger; works with setState, Bloc, Provider, Redux, etc. |
| `infinite` | **bool** | Loops the animation indefinitely |
| `spins` | **double** | Number of rotations — applies to `Spin`, `Roulette`, `SpinPerfect` |
| `manualTrigger` | **bool** | Disables auto-play; requires the `controller` callback to drive the animation |
| `controller` | **Function** | Exposes the `AnimationController` for advanced control |
| `onFinish` | **Function** | Callback fired when the animation completes; receives an `AnimateDoDirection` (forward / backward) |
| `curve` | **Curve** | Custom easing curve |
---
## Available Animations
### Fade In
| | | | |
| -------------- | ---------- | ------------- | ----------- |
| FadeIn | FadeInDown | FadeInDownBig | FadeInUp |
| FadeInUpBig | FadeInLeft | FadeInLeftBig | FadeInRight |
| FadeInRightBig | | | |
### Fade Out
| | | | |
| --------------- | ----------- | -------------- | ------------ |
| FadeOut | FadeOutDown | FadeOutDownBig | FadeOutUp |
| FadeOutUpBig | FadeOutLeft | FadeOutLeftBig | FadeOutRight |
| FadeOutRightBig | | | |
### Bounce In
| | | | |
| ------------ | ---------- | ------------ | ------------- |
| BounceInDown | BounceInUp | BounceInLeft | BounceInRight |
### Elastic In
| | | | |
| -------------- | ------------- | ----------- | ------------- |
| ElasticIn | ElasticInDown | ElasticInUp | ElasticInLeft |
| ElasticInRight | | | |
### Slide In
| | | | |
| ----------- | --------- | ----------- | ------------ |
| SlideInDown | SlideInUp | SlideInLeft | SlideInRight |
### Back In / Back Out
| | | | |
| ----------- | --------- | ----------- | ------------ |
| BackInDown | BackInUp | BackInLeft | BackInRight |
| BackOutDown | BackOutUp | BackOutLeft | BackOutRight |
### Flip In
| | |
| ------- | ------- |
| FlipInX | FlipInY |
### Zoom
| | |
| ------ | ------- |
| ZoomIn | ZoomOut |
### Attention Seekers
All attention seekers support the `infinite` property to loop indefinitely.
| | | | |
| ------ | ----------- | ------ | ---------- |
| Bounce | Dance | Flash | Pulse |
| Flip | Roulette | ShakeX | ShakeY |
| Spin | SpinPerfect | Swing | HeartBeat |
| Wobble | Jello | Tada | RubberBand |
### Custom Animations
These widgets let you move widgets around the screen and chain them with any other animation.
| | |
| ------ | --------- |
| MoveTo | MoveToArc |
---
## Two Syntaxes
Both syntaxes are fully supported. Use whichever feels more natural to you.
### Sugar Syntax
```dart
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
const Square().fadeInLeft(),
const Square().fadeInUp(),
const Square().fadeInDown(),
const Square().fadeInRight(),
],
)
```
### Class Syntax
```dart
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FadeInLeft(child: Square()),
FadeInUp(child: Square()),
FadeInDown(child: Square()),
FadeInRight(child: Square()),
],
)
```
---
## Animation Chaining
Chain multiple animations sequentially using the sugar syntax:
```dart
Square()
.tada()
.wobble()
.fadeIn()
```
### Chaining with custom animations
```dart
const Square()
.moveTo(top: 30)
.moveTo(
left: 30,
delay: const Duration(seconds: 1),
)
.moveToArc(
bottom: 30,
right: 30,
delay: const Duration(seconds: 2),
)
.fadeOut(
delay: const Duration(seconds: 2),
)
```
---
## Triggering Animations
### Toggle with `animate`
Set `animate: true` to play forward, `animate: false` to reverse. Works with any state management solution.
```dart
FadeIn(animate: animate, child: const Square())
FadeInUp(animate: animate, child: const Square())
FadeInDown(animate: animate, child: const Square())
FadeInLeft(animate: animate, child: const Square())
FadeInRight(animate: animate, child: const Square())
```
---
## Events — `onFinish`
The `onFinish` callback fires when an animation completes, passing an `AnimateDoDirection` value (`forward` or `backward`).
**Sugar syntax**
```dart
const Square().fadeIn(
animate: animate,
delay: const Duration(milliseconds: 100),
onFinish: (direction) => print('$direction'),
),
```
**Class syntax**
```dart
FadeIn(
animate: animate,
delay: const Duration(milliseconds: 100),
onFinish: (direction) => print('$direction'),
child: const Square(),
),
```
---
## Manual Trigger
Use `manualTrigger: true` together with the `controller` callback to drive the animation yourself — useful when you need full control over playback.
> **Note:** When using `manualTrigger`, you are responsible for calling `controller.forward()` and `controller.reverse()` explicitly.
```dart
class _MyWidgetState extends State {
late AnimationController animateController;
@override
Widget build(BuildContext context) {
return FadeInUp(
manualTrigger: true,
controller: (controller) => animateController = controller,
child: YourWidget(),
);
}
}
```
---
## Demos
For complete runnable examples, see the [`example` folder](https://github.com/Klerith/animate_do_package/tree/master/example).
---
If you find this package useful, consider leaving a like on [pub.dev](https://pub.dev/packages/animate_do). Feedback and suggestions are always welcome.