{"id":13548774,"url":"https://github.com/Klerith/animate_do_package","last_synced_at":"2025-04-02T21:32:16.981Z","repository":{"id":41841169,"uuid":"241421778","full_name":"Klerith/animate_do_package","owner":"Klerith","description":"Animate_do Package","archived":false,"fork":false,"pushed_at":"2025-02-26T02:14:01.000Z","size":6468,"stargazers_count":318,"open_issues_count":0,"forks_count":39,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-02-26T03:23:10.827Z","etag":null,"topics":["animations","dart","fernandoherrera","flutter"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/animate_do","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Klerith.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-18T17:18:07.000Z","updated_at":"2025-02-26T02:14:05.000Z","dependencies_parsed_at":"2024-06-18T13:54:14.304Z","dependency_job_id":"4752e37a-07a8-47ef-bbd7-dedf2ab20e56","html_url":"https://github.com/Klerith/animate_do_package","commit_stats":{"total_commits":99,"total_committers":2,"mean_commits":49.5,"dds":"0.010101010101010055","last_synced_commit":"52ae98c789bf19f91e60d8c05bff47154ca95b20"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Klerith%2Fanimate_do_package","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Klerith%2Fanimate_do_package/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Klerith%2Fanimate_do_package/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Klerith%2Fanimate_do_package/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Klerith","download_url":"https://codeload.github.com/Klerith/animate_do_package/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246895907,"owners_count":20851352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","dart","fernandoherrera","flutter"],"created_at":"2024-08-01T12:01:14.302Z","updated_at":"2025-04-02T21:32:16.973Z","avatar_url":"https://github.com/Klerith.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# animate_do\n\n## Null-Safety, Dart 3, with zero external dependencies\n\n### iOS, Android, Linux, Mac, Web, Windows ready\n\nAn animation package inspired by [Animate.css](https://daneden.github.io/animate.css/), built using only Flutter animations, with zero dependencies.\n\n![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-01.gif 'Animate_do')\n\n## Getting Started\n\nThis package is simple to use. Every animation contains default values that look beautiful, but you can customize the properties to meet your needs.\n\n## Properties in almost every animated widget:\n\n| Property      | Type         | Description                                                                                       |\n| ------------- | ------------ | ------------------------------------------------------------------------------------------------- |\n| key           | **Key**      | (Optional) Widget key reference                                                                   |\n| child         | **Widget**   | Required widget to animate                                                                        |\n| duration      | **Duration** | Duration of the animation                                                                         |\n| delay         | **Duration** | Delay before the animation starts                                                                 |\n| from          | **double**   | Initial or final value for more pronounced slide/fade effects                                     |\n| animate       | **boolean**  | Toggle from false to true to trigger animation (works with setState, Bloc, Provider, Redux, etc.) |\n| infinite      | **boolean**  | Makes attention-seeking animations run indefinitely                                               |\n| spins         | **double**   | Number of rotations for applicable animations (Spin, Roulette, PerfectSpin)                       |\n| manualTrigger | **boolean**  | Enable manual animation triggering (requires controller property)                                 |\n| controller    | **Function** | Exposes animation controller for advanced use cases                                               |\n| onFinish      | **Function** | Callback triggered when animation completes (provides direction: forward/backward)                |\n| curve         | **Curve**    | Customizable animation curve for any animated widget                                              |\n\n# Available Animations\n\n## FadeIn Animations\n\n- FadeIn\n- FadeInDown\n- FadeInDownBig\n- FadeInUp\n- FadeInUpBig\n- FadeInLeft\n- FadeInLeftBig\n- FadeInRight\n- FadeInRightBig\n\n## FadeOut Animations\n\n- FadeOut\n- FadeOutDown\n- FadeOutDownBig\n- FadeOutUp\n- FadeOutUpBig\n- FadeOutLeft\n- FadeOutLeftBig\n- FadeOutRight\n- FadeOutRightBig\n\n## BounceIn Animations\n\n- BounceInDown\n- BounceInUp\n- BounceInLeft\n- BounceInRight\n\n## ElasticIn Animations\n\n- ElasticIn\n- ElasticInDown\n- ElasticInUp\n- ElasticInLeft\n- ElasticInRight\n\n## SlideIn Animations\n\n- SlideInDown\n- SlideInUp\n- SlideInLeft\n- SlideInRight\n\n## BackIn Animations\n\n- BackInDown\n- BackInUp\n- BackInLeft\n- BackInRight\n\n## BackOut Animations\n\n- BackOutDown\n- BackOutUp\n- BackOutLeft\n- BackOutRight\n\n## FlipIn Animations\n\n- FlipInX\n- FlipInY\n\n## Zoom Animations\n\n- ZoomIn\n- ZoomOut\n\n## Attention Seekers\n\nAll of the following animations can be made infinite using the `infinite` property (type: bool)\n\n- Bounce\n- Dance\n- Flash\n- Pulse\n- Flip\n- Roulette\n- ShakeX\n- ShakeY\n- Spin\n- SpinPerfect\n- Swing\n- HeartBeat\n- Wobble\n- Jello\n- Tada\n- RubberBand\n\n## Custom Animations\n\nThese two new animation Widgets or Widget Methods are used to create custom animations and move widgets around the screen. You can append them to previous animations to create custom ones.\n\n- MoveTo\n- MoveToArc\n\n## Two Syntaxes\n\nBoth syntaxes are supported, I have no plans to make the old one deprecated because some people like the old syntax better.\n\n- Sugar Syntax\n- Class Syntax\n\n### (new) Sugar Syntax example\n\nCheck [the example folder](https://github.com/Klerith/animate_do_package/tree/master/example) for more details on how to use the sugar syntax.\n\n```\nhome: Scaffold(\n    body: Center(\n\n        child: Row(\n        mainAxisAlignment: MainAxisAlignment.spaceAround,\n        children: \u003cWidget\u003e[\n\n            const Square().fadeInLeft(),\n            const Square().fadeInUp(),\n            const Square().fadeInDown(),\n            const Square().fadeInRight(),\n\n        ],\n        ),\n\n    ),\n),\n```\n\n## (classic) Class Syntax example\n\n```\nhome: Scaffold(\n    body: Center(\n\n        child: Row(\n        mainAxisAlignment: MainAxisAlignment.spaceAround,\n        children: \u003cWidget\u003e[\n\n            FadeInLeft(child: Square() ),\n            FadeInUp(child: Square() ),\n            FadeInDown(child: Square() ),\n            FadeInRight(child: Square() ),\n\n        ],\n        ),\n\n    ),\n),\n```\n\n# Animation Chaining\n\nWith the new syntax you can chain the animations like this:\n\n```dart\nSquare()\n  .tada()\n  .wobble()\n  .fadeIn()\n```\n\n## Animation chaining with custom animations\n\n```dart\nconst Square()\n  .moveTo(\n    top: 30\n  )\n  .moveTo(\n    left: 30,\n    delay: const Duration(seconds: 1)\n  )\n  .moveToArc(\n    bottom: 30,\n    right: 30,\n    delay: const Duration(seconds: 2)\n  )\n  .fadeOut(\n    delay: const Duration( seconds: 2)\n  )\n```\n\n# Demos\n\nFor complete examples, check the `example` folder inside the repository\n\n![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-00.gif 'Animate_do demo-00')\n\n![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-02.gif 'Animate_do demo-02')\n\n![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-04.gif 'Animate_do demo-04')\n\n![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-05.gif 'Animate_do demo-05')\n\n## Trigger animation manually (The easy way)\n\nJust add the property animate to **true** to trigger the animation, and to **false** to revert the animation.\n\n![Animate_do demo animation](https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-03.gif 'animate property')\n\n## Example: 02-Basic - Now with toggle\n\nJust toggle the **animate** property to animate in or out easily.\nCheck the full code inside the example folder\n\n```\nclass MyApp extends StatefulWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  State\u003cMyApp\u003e createState() =\u003e _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n\n  bool animate = true;\n  late AnimationController controller;\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Material App',\n      theme: ThemeData.light(useMaterial3: true),\n      home: Scaffold(\n        body: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n\n\n            Row(\n              mainAxisAlignment: MainAxisAlignment.spaceAround,\n              children: \u003cWidget\u003e[\n\n                /// The animations are just widgets\n                FadeIn(animate: animate,child: const Square(),),\n                FadeInUp(animate: animate,child: const Square(),),\n                FadeInDown(animate: animate,child: const Square(),),\n                FadeInLeft(animate: animate,child: const Square(),),\n                FadeInRight(animate: animate,child: const Square(),),\n\n              ],\n            ),\n\n\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Note: Square, is just a Square blue container\n\n```\nclass Square extends StatelessWidget {\n  const Square({Key? key}) : super(key: key);\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      width: 50,\n      height: 50,\n      color: const Color(0xff67549B),\n    );\n  }\n}\n\n```\n\n## Events\n\nThere is a new property called `onFinish` that is called when the animation finishes. It returns a value of type `AnimateDoDirection` indicating the direction of the animation (forward or backward).\n\n### Example:\n\n**Sugar syntax**\n\n```\nconst Square()\n  .fadeIn(animate: animate,\n      delay: const Duration(milliseconds: 100),\n      onFinish: (direction) =\u003e print('$direction'),\n  ),\n```\n\n**Classic syntax**\n\n```\nFadeIn(\n  animate: animate,\n  delay: const Duration(milliseconds: 100),\n  onFinish: (direction) =\u003e print('$direction'),\n  child: const Square(),\n),\n```\n\n## Manual Trigger\n\nThere is a way to get the AnimationController used inside the animation, which lets you control the animation by restarting it, changing its duration, repeating it, etc.\n\nHowever, with all the new features added, this is not needed for the majority of users, but if you need it, here is how to do it.\n\n**Important:** If you decide to go for the manual trigger, you have to control the animation entirely, which means running controller.forward() and controller.reverse() manually.\n\nUsually it's easier now to use the animate property and just toggle it to true or false to trigger the animation.\n\n#### Example\n\n```\nclass FadeOutDownBig extends StatelessWidget/StatefulWidget {\n\nAnimationController animateController;\n...\n...\n...\n\nchild: FadeInUp(\n\n    // (optional) if true, will not fire the animation on load\n    manualTrigger: true,\n\n    //(optional, but mandatory if you use manualTrigger:true) This callback exposes the AnimationController used for the selected animation. Then you can call animationController.forward() to trigger the animation wherever you like manually.\n    controller: ( controller ) =\u003e animateController = controller,\n\n    child: YourWidget(),\n\n```\n\n### More examples\n\nCheck the [**repository for more examples**](https://github.com/Klerith/animate_do_package), or the example folder inside the package.\n\nDon't forget to like the package if you find it useful, and if you have any suggestion, please let me know.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKlerith%2Fanimate_do_package","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKlerith%2Fanimate_do_package","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKlerith%2Fanimate_do_package/lists"}