CINXE.COM

<!DOCTYPE html> <html lang="en-us"><head><script src="https://www.googletagmanager.com/gtm.js?id=GTM-MX6DBN9" async="async"></script><script src="/static/hash-mh7qv2oc/js/gtm.js" async="async"></script><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@dart_lang"/><meta name="twitter:description" content="Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies."/><meta name="twitter:image" content="https://pub.dev/static/hash-mh7qv2oc/img/pub-dev-icon-cover-image.png"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Dart packages"/><meta property="og:title" content="animate_do | Flutter package"/><meta property="og:description" content="Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies."/><meta property="og:image" content="https://pub.dev/static/hash-mh7qv2oc/img/pub-dev-icon-cover-image.png"/><meta property="og:url" content="https://pub.dev/packages/animate_do"/><title>animate_do | Flutter package</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400&family=Google+Sans+Text:wght@400;500;700&family=Google+Sans+Mono:wght@400;700&display=swap"/><link rel="shortcut icon" href="/static/hash-mh7qv2oc/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon" href="/static/hash-mh7qv2oc/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon-precomposed" href="/static/hash-mh7qv2oc/img/flutter-logo-32x32.png"/><link rel="stylesheet" href="https://www.gstatic.com/glue/v25_0/ccb.min.css"/><link rel="search" type="application/opensearchdescription+xml" title="Dart packages" href="/osd.xml"/><link rel="canonical" href="https://pub.dev/packages/animate_do"/><meta name="description" content="Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies."/><link rel="alternate" type="application/atom+xml" title="Updated Packages Feed for Pub" href="/feed.atom"/><link rel="stylesheet" type="text/css" href="/static/hash-mh7qv2oc/material/bundle/styles.css"/><link rel="stylesheet" type="text/css" href="/static/hash-mh7qv2oc/css/style.css"/><script src="/static/hash-mh7qv2oc/material/bundle/script.min.js" defer="defer"></script><script src="/static/hash-mh7qv2oc/js/script.dart.js" defer="defer"></script><script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script><meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJhbmltYXRlX2RvIiwidmVyc2lvbiI6IjQuMi4wIiwibGlrZXMiOjQ2ODIsInB1Ymxpc2hlcklkIjoiZmVybmFuZG8taGVycmVyYS5jb20iLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjpmYWxzZX0="/><link rel="preload" href="/static/hash-mh7qv2oc/highlight/highlight-with-init.js" as="script"/></head><body class="light-theme"><script src="/static/hash-mh7qv2oc/js/dark-init.js"></script><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"></button><a class="logo" href="/" aria-label="Go to the landing page of pub.dev"><img class="site-logo" src="/static/hash-mh7qv2oc/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"></div><div class="site-header-mask"></div><div class="site-header-search"><form action="/packages" method="GET"><input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/></form></div><nav class="site-header-nav scroll-container"><div class="nav-login-container"><button id="-account-login" class="nav-main-button link">Sign in</button></div><div class="nav-container nav-help-container hoverable"><button class="nav-main-button">Help</button><div class="nav-hover-popup"><div class="nav-table-columns"><div class="nav-table-column"><h3>pub.dev</h3><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div><div class="nav-table-column"><h3>Flutter</h3><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div><div class="nav-table-column"><h3>Dart</h3><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">pub.dev <img class="foldable-icon" src="/static/hash-mh7qv2oc/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Flutter <img class="foldable-icon" src="/static/hash-mh7qv2oc/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Dart <img class="foldable-icon" src="/static/hash-mh7qv2oc/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></nav><button class="-pub-theme-toggle" aria-label="light/dark theme toggle"></button></div><div id="banner-container"></div><main class="container"><div class="detail-wrapper -active -has-info-box"><div class="detail-header -is-loose"><div class="detail-container"><div class="detail-header-outer-block"><div class="detail-header-content-block"><h1 class="title pub-monochrome-icon-hoverable">animate_do 4.2.0 <span class="pkg-page-title-copy"><img class="pub-monochrome-icon pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/content-copy-icon.svg" alt="copy "animate_do: ^4.2.0" to clipboard" width="18" height="18" title="Copy "animate_do: ^4.2.0" to clipboard" data-copy-content="animate_do: ^4.2.0" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">animate_do: ^4.2.0</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="Feb 26, 2025" role="button" data-timestamp="1740536211055">30 days ago</a></span> • <a class="-pub-publisher" href="/publishers/fernando-herrera.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>fernando-herrera.com</a><span class="package-badge" title="Package is compatible with Dart 3.">Dart 3 compatible</span></div><div class="detail-tags-and-like"><div class="detail-tags"><div class="-pub-tag-badge"><span class="tag-badge-main">SDK</span><a class="tag-badge-sub" href="/packages?q=sdk%3Aflutter" rel="nofollow" title="Packages compatible with Flutter SDK">Flutter</a></div><div class="-pub-tag-badge"><span class="tag-badge-main">Platform</span><a class="tag-badge-sub" href="/packages?q=platform%3Aandroid" rel="nofollow" title="Packages compatible with Android platform">Android</a><a class="tag-badge-sub" href="/packages?q=platform%3Aios" rel="nofollow" title="Packages compatible with iOS platform">iOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Alinux" rel="nofollow" title="Packages compatible with Linux platform">Linux</a><a class="tag-badge-sub" href="/packages?q=platform%3Amacos" rel="nofollow" title="Packages compatible with macOS platform">macOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Aweb" rel="nofollow" title="Packages compatible with Web platform">web</a><a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a></div></div><div class="detail-like"><button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package"><img class="mdc-icon-button__icon" src="/static/hash-mh7qv2oc/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/><img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-mh7qv2oc/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">4.6k</span></span></div></div></div></div></div></div><div class="detail-container"><div class="detail-lead"><div class="detail-metadata-toggle"><div class="detail-metadata-toggle-icon">→</div><h3 class="detail-lead-title">Metadata</h3></div><p class="detail-lead-text">Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies.</p><p class="detail-lead-more"><a class="detail-metadata-toggle">More...</a></p></div></div><div class="detail-body"><div class="detail-tabs"><div class="detail-tabs-wide-header"><div class="detail-container"><ul class="detail-tabs-header"><li class="detail-tab tab-button detail-tab-readme-title -active">Readme</li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/animate_do/changelog" role="button">Changelog</a></li><li class="detail-tab tab-link detail-tab-example-title"><a href="/packages/animate_do/example" role="button">Example</a></li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/animate_do/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/animate_do/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/animate_do/score" role="button">Scores</a></li></ul></div></div><div class="detail-container detail-body-main"><div class="detail-tabs-content"><section class="tab-content detail-tab-readme-content -active markdown-body"><h1 id="animate_do" class="hash-header">animate_do <a href="#animate_do" class="hash-link">#</a></h1> <h2 id="null-safety-dart-3-with-zero-external-dependencies" class="hash-header">Null-Safety, Dart 3, with zero external dependencies <a href="#null-safety-dart-3-with-zero-external-dependencies" class="hash-link">#</a></h2> <h3 id="ios-android-linux-mac-web-windows-ready" class="hash-header">iOS, Android, Linux, Mac, Web, Windows ready <a href="#ios-android-linux-mac-web-windows-ready" class="hash-link">#</a></h3> <p>An animation package inspired by <a href="https://daneden.github.io/animate.css/" rel="ugc">Animate.css</a>, built using only Flutter animations, with zero dependencies.</p> <p><img src="https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-01.gif" alt="Animate_do demo animation" title="Animate_do"></p> <h2 id="getting-started" class="hash-header">Getting Started <a href="#getting-started" class="hash-link">#</a></h2> <p>This package is simple to use. Every animation contains default values that look beautiful, but you can customize the properties to meet your needs.</p> <h2 id="properties-in-almost-every-animated-widget" class="hash-header">Properties in almost every animated widget: <a href="#properties-in-almost-every-animated-widget" class="hash-link">#</a></h2> <table> <thead> <tr> <th>Property</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>key</td> <td><strong>Key</strong></td> <td>(Optional) Widget key reference</td> </tr> <tr> <td>child</td> <td><strong>Widget</strong></td> <td>Required widget to animate</td> </tr> <tr> <td>duration</td> <td><strong>Duration</strong></td> <td>Duration of the animation</td> </tr> <tr> <td>delay</td> <td><strong>Duration</strong></td> <td>Delay before the animation starts</td> </tr> <tr> <td>from</td> <td><strong>double</strong></td> <td>Initial or final value for more pronounced slide/fade effects</td> </tr> <tr> <td>animate</td> <td><strong>boolean</strong></td> <td>Toggle from false to true to trigger animation (works with setState, Bloc, Provider, Redux, etc.)</td> </tr> <tr> <td>infinite</td> <td><strong>boolean</strong></td> <td>Makes attention-seeking animations run indefinitely</td> </tr> <tr> <td>spins</td> <td><strong>double</strong></td> <td>Number of rotations for applicable animations (Spin, Roulette, PerfectSpin)</td> </tr> <tr> <td>manualTrigger</td> <td><strong>boolean</strong></td> <td>Enable manual animation triggering (requires controller property)</td> </tr> <tr> <td>controller</td> <td><strong>Function</strong></td> <td>Exposes animation controller for advanced use cases</td> </tr> <tr> <td>onFinish</td> <td><strong>Function</strong></td> <td>Callback triggered when animation completes (provides direction: forward/backward)</td> </tr> <tr> <td>curve</td> <td><strong>Curve</strong></td> <td>Customizable animation curve for any animated widget</td> </tr> </tbody> </table> <h1 id="available-animations" class="hash-header">Available Animations <a href="#available-animations" class="hash-link">#</a></h1> <h2 id="fadein-animations" class="hash-header">FadeIn Animations <a href="#fadein-animations" class="hash-link">#</a></h2> <ul> <li>FadeIn</li> <li>FadeInDown</li> <li>FadeInDownBig</li> <li>FadeInUp</li> <li>FadeInUpBig</li> <li>FadeInLeft</li> <li>FadeInLeftBig</li> <li>FadeInRight</li> <li>FadeInRightBig</li> </ul> <h2 id="fadeout-animations" class="hash-header">FadeOut Animations <a href="#fadeout-animations" class="hash-link">#</a></h2> <ul> <li>FadeOut</li> <li>FadeOutDown</li> <li>FadeOutDownBig</li> <li>FadeOutUp</li> <li>FadeOutUpBig</li> <li>FadeOutLeft</li> <li>FadeOutLeftBig</li> <li>FadeOutRight</li> <li>FadeOutRightBig</li> </ul> <h2 id="bouncein-animations" class="hash-header">BounceIn Animations <a href="#bouncein-animations" class="hash-link">#</a></h2> <ul> <li>BounceInDown</li> <li>BounceInUp</li> <li>BounceInLeft</li> <li>BounceInRight</li> </ul> <h2 id="elasticin-animations" class="hash-header">ElasticIn Animations <a href="#elasticin-animations" class="hash-link">#</a></h2> <ul> <li>ElasticIn</li> <li>ElasticInDown</li> <li>ElasticInUp</li> <li>ElasticInLeft</li> <li>ElasticInRight</li> </ul> <h2 id="slidein-animations" class="hash-header">SlideIn Animations <a href="#slidein-animations" class="hash-link">#</a></h2> <ul> <li>SlideInDown</li> <li>SlideInUp</li> <li>SlideInLeft</li> <li>SlideInRight</li> </ul> <h2 id="backin-animations" class="hash-header">BackIn Animations <a href="#backin-animations" class="hash-link">#</a></h2> <ul> <li>BackInDown</li> <li>BackInUp</li> <li>BackInLeft</li> <li>BackInRight</li> </ul> <h2 id="backout-animations" class="hash-header">BackOut Animations <a href="#backout-animations" class="hash-link">#</a></h2> <ul> <li>BackOutDown</li> <li>BackOutUp</li> <li>BackOutLeft</li> <li>BackOutRight</li> </ul> <h2 id="flipin-animations" class="hash-header">FlipIn Animations <a href="#flipin-animations" class="hash-link">#</a></h2> <ul> <li>FlipInX</li> <li>FlipInY</li> </ul> <h2 id="zoom-animations" class="hash-header">Zoom Animations <a href="#zoom-animations" class="hash-link">#</a></h2> <ul> <li>ZoomIn</li> <li>ZoomOut</li> </ul> <h2 id="attention-seekers" class="hash-header">Attention Seekers <a href="#attention-seekers" class="hash-link">#</a></h2> <p>All of the following animations can be made infinite using the <code>infinite</code> property (type: bool)</p> <ul> <li>Bounce</li> <li>Dance</li> <li>Flash</li> <li>Pulse</li> <li>Flip</li> <li>Roulette</li> <li>ShakeX</li> <li>ShakeY</li> <li>Spin</li> <li>SpinPerfect</li> <li>Swing</li> <li>HeartBeat</li> <li>Wobble</li> <li>Jello</li> <li>Tada</li> <li>RubberBand</li> </ul> <h2 id="custom-animations" class="hash-header">Custom Animations <a href="#custom-animations" class="hash-link">#</a></h2> <p>These 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.</p> <ul> <li>MoveTo</li> <li>MoveToArc</li> </ul> <h2 id="two-syntaxes" class="hash-header">Two Syntaxes <a href="#two-syntaxes" class="hash-link">#</a></h2> <p>Both syntaxes are supported, I have no plans to make the old one deprecated because some people like the old syntax better.</p> <ul> <li>Sugar Syntax</li> <li>Class Syntax</li> </ul> <h3 id="new-sugar-syntax-example" class="hash-header">(new) Sugar Syntax example <a href="#new-sugar-syntax-example" class="hash-link">#</a></h3> <p>Check <a href="https://github.com/Klerith/animate_do_package/tree/master/example" rel="ugc">the example folder</a> for more details on how to use the sugar syntax.</p> <pre><code>home: Scaffold( body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ const Square().fadeInLeft(), const Square().fadeInUp(), const Square().fadeInDown(), const Square().fadeInRight(), ], ), ), ), </code></pre> <h2 id="classic-class-syntax-example" class="hash-header">(classic) Class Syntax example <a href="#classic-class-syntax-example" class="hash-link">#</a></h2> <pre><code>home: Scaffold( body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ FadeInLeft(child: Square() ), FadeInUp(child: Square() ), FadeInDown(child: Square() ), FadeInRight(child: Square() ), ], ), ), ), </code></pre> <h1 id="animation-chaining" class="hash-header">Animation Chaining <a href="#animation-chaining" class="hash-link">#</a></h1> <p>With the new syntax you can chain the animations like this:</p> <pre><code class="language-dart">Square() .tada() .wobble() .fadeIn() </code></pre> <h2 id="animation-chaining-with-custom-animations" class="hash-header">Animation chaining with custom animations <a href="#animation-chaining-with-custom-animations" class="hash-link">#</a></h2> <pre><code class="language-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) ) </code></pre> <h1 id="demos" class="hash-header">Demos <a href="#demos" class="hash-link">#</a></h1> <p>For complete examples, check the <code>example</code> folder inside the repository</p> <p><img src="https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-00.gif" alt="Animate_do demo animation" title="Animate_do demo-00"></p> <p><img src="https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-02.gif" alt="Animate_do demo animation" title="Animate_do demo-02"></p> <p><img src="https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-04.gif" alt="Animate_do demo animation" title="Animate_do demo-04"></p> <p><img src="https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-05.gif" alt="Animate_do demo animation" title="Animate_do demo-05"></p> <h2 id="trigger-animation-manually-the-easy-way" class="hash-header">Trigger animation manually (The easy way) <a href="#trigger-animation-manually-the-easy-way" class="hash-link">#</a></h2> <p>Just add the property animate to <strong>true</strong> to trigger the animation, and to <strong>false</strong> to revert the animation.</p> <p><img src="https://raw.githubusercontent.com/Klerith/animate_do_package/master/screenshots/demo-03.gif" alt="Animate_do demo animation" title="animate property"></p> <h2 id="example-02-basic---now-with-toggle" class="hash-header">Example: 02-Basic - Now with toggle <a href="#example-02-basic---now-with-toggle" class="hash-link">#</a></h2> <p>Just toggle the <strong>animate</strong> property to animate in or out easily. Check the full code inside the example folder</p> <pre><code>class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool animate = true; late AnimationController controller; @override Widget build(BuildContext context) { return MaterialApp( title: 'Material App', theme: ThemeData.light(useMaterial3: true), home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ /// The animations are just widgets 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(),), ], ), ], ), ), ); } } </code></pre> <h3 id="note-square-is-just-a-square-blue-container" class="hash-header">Note: Square, is just a Square blue container <a href="#note-square-is-just-a-square-blue-container" class="hash-link">#</a></h3> <pre><code>class Square extends StatelessWidget { const Square({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( width: 50, height: 50, color: const Color(0xff67549B), ); } } </code></pre> <h2 id="events" class="hash-header">Events <a href="#events" class="hash-link">#</a></h2> <p>There is a new property called <code>onFinish</code> that is called when the animation finishes. It returns a value of type <code>AnimateDoDirection</code> indicating the direction of the animation (forward or backward).</p> <h3 id="example" class="hash-header">Example: <a href="#example" class="hash-link">#</a></h3> <p><strong>Sugar syntax</strong></p> <pre><code>const Square() .fadeIn(animate: animate, delay: const Duration(milliseconds: 100), onFinish: (direction) => print('$direction'), ), </code></pre> <p><strong>Classic syntax</strong></p> <pre><code>FadeIn( animate: animate, delay: const Duration(milliseconds: 100), onFinish: (direction) => print('$direction'), child: const Square(), ), </code></pre> <h2 id="manual-trigger" class="hash-header">Manual Trigger <a href="#manual-trigger" class="hash-link">#</a></h2> <p>There 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.</p> <p>However, 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.</p> <p><strong>Important:</strong> 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.</p> <p>Usually it's easier now to use the animate property and just toggle it to true or false to trigger the animation.</p> <h4 id="example-2">Example</h4> <pre><code>class FadeOutDownBig extends StatelessWidget/StatefulWidget { AnimationController animateController; ... ... ... child: FadeInUp( // (optional) if true, will not fire the animation on load manualTrigger: true, //(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. controller: ( controller ) => animateController = controller, child: YourWidget(), </code></pre> <h3 id="more-examples" class="hash-header">More examples <a href="#more-examples" class="hash-link">#</a></h3> <p>Check the <a href="https://github.com/Klerith/animate_do_package" rel="ugc"><strong>repository for more examples</strong></a>, or the example folder inside the package.</p> <p>Don't forget to like the package if you find it useful, and if you have any suggestion, please let me know.</p> </section></div></div></div><aside class="detail-info-box"><a class="packages-scores" href="/packages/animate_do/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">4.68k</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">160</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">79.1k</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><div class="detail-screenshot-thumbnail"><div class="thumbnail-container" data-thumbnail="/packages/animate_do/versions/4.2.0/gen-res/gen/preview.webp" data-thumbnail-descriptions-json="["Animate_do example logo"]" data-ga-click-event="screenshot-thumbnail-click"><img class="thumbnail-image" src="/packages/animate_do/versions/4.2.0/gen-res/gen/190x190/preview.webp" alt="screenshot" title="View screenshots" tabindex="0"/></div><img class="collections-icon" src="/static/hash-mh7qv2oc/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/></div><h3 class="title">Publisher</h3><p><a href="/publishers/fernando-herrera.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>fernando-herrera.com</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gEPjZwZGAABFRAAA1UcAAOhGAAChSwAA5FEAAMpRAAAsQAAAczEAAGQ3AAAONwAAbTAAAAMiAABrLQAAFj8AAOg3AAAoNQAAyTcAAIc2AAC+OQAAXS8AAJU5AABZOQAAXzYAAMU3AACdOQAAgT0AAHw2AADkNQAALFAAAF5WAAC3OAAAzjUAANMxAACTMQAA1y4AALcuAAD/LwAAOCoAAEYsAAB9LgAAWC8AAJwtAAAsLgAAFjEAAJMzAAB3NgAAMS4AACEuAACDKgAAsSoAAN8nAAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies.</p><p><a class="link" href="https://fernando-herrera.com" rel="ugc">Homepage</a><br/><a class="link" href="https://github.com/Klerith/animate_do_package" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/Klerith/animate_do_package/issues" rel="ugc">View/report issues</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/animate_do/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/animate_do/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Aanimate_do" rel="nofollow">Packages that depend on animate_do</a></p></aside></div><script type="application/ld+json">{"@context":"http\u003a\u002f\u002fschema.org","@type":"SoftwareSourceCode","name":"animate\u005fdo","version":"4.2.0","description":"animate\u005fdo - Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies.","url":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fanimate\u005fdo","dateCreated":"2020-02-18T17\u003a33\u003a43.569498Z","dateModified":"2025-02-26T02\u003a16\u003a51.055618Z","programmingLanguage":"Dart","image":"https\u003a\u002f\u002fpub.dev\u002fstatic\u002fimg\u002fpub-dev-icon-cover-image.png","license":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002fanimate\u005fdo\u002flicense"}</script></div><div class="detail-metadata"><h3 class="detail-metadata-title"><span class="detail-metadata-toggle">←</span> Metadata</h3><div class="detail-info-box"><a class="packages-scores" href="/packages/animate_do/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">4.68k</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">160</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">79.1k</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><div class="detail-screenshot-thumbnail"><div class="thumbnail-container" data-thumbnail="/packages/animate_do/versions/4.2.0/gen-res/gen/preview.webp" data-thumbnail-descriptions-json="["Animate_do example logo"]" data-ga-click-event="screenshot-thumbnail-click"><img class="thumbnail-image" src="/packages/animate_do/versions/4.2.0/gen-res/gen/190x190/preview.webp" alt="screenshot" title="View screenshots" tabindex="0"/></div><img class="collections-icon" src="/static/hash-mh7qv2oc/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/></div><h3 class="title">Publisher</h3><p><a href="/publishers/fernando-herrera.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>fernando-herrera.com</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gEPjZwZGAABFRAAA1UcAAOhGAAChSwAA5FEAAMpRAAAsQAAAczEAAGQ3AAAONwAAbTAAAAMiAABrLQAAFj8AAOg3AAAoNQAAyTcAAIc2AAC+OQAAXS8AAJU5AABZOQAAXzYAAMU3AACdOQAAgT0AAHw2AADkNQAALFAAAF5WAAC3OAAAzjUAANMxAACTMQAA1y4AALcuAAD/LwAAOCoAAEYsAAB9LgAAWC8AAJwtAAAsLgAAFjEAAJMzAAB3NgAAMS4AACEuAACDKgAAsSoAAN8nAAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>Beautiful animations inspired by Animate.css, providing customizable widget-based animations with no external dependencies.</p><p><a class="link" href="https://fernando-herrera.com" rel="ugc">Homepage</a><br/><a class="link" href="https://github.com/Klerith/animate_do_package" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/Klerith/animate_do_package/issues" rel="ugc">View/report issues</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/animate_do/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-mh7qv2oc/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/animate_do/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Aanimate_do" rel="nofollow">Packages that depend on animate_do</a></p></div><p class="detail-lead-back"><a class="detail-metadata-toggle">Back</a></p></div><div id="-screenshot-carousel" class="carousel"><fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-mh7qv2oc/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/></fab><div id="-image-container" class="image-container"></div><fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-mh7qv2oc/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/></fab><p id="-screenshot-description" class="screenshot-description"></p></div></main><footer class="site-footer"><a class="link" href="https://dart.dev/">Dart language</a><a class="link sep" href="/report?subject=package%3Aanimate_do&url=https%3A%2F%2Fpub.dev%2Fpackages%2Fanimate_do">Report package</a><a class="link sep" href="/policy">Policy</a><a class="link sep" href="https://www.google.com/intl/en/policies/terms/">Terms</a><a class="link sep" href="https://developers.google.com/terms/">API Terms</a><a class="link sep" href="/security">Security</a><a class="link sep" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><a class="link sep" href="/help">Help</a><a class="link icon sep" href="/feed.atom"><img class="inline-icon" src="/static/hash-mh7qv2oc/img/rss-feed-icon.svg" alt="RSS" width="20" height="20" title="RSS/atom feed"/></a><a class="link icon github_issue" href="https://github.com/dart-lang/pub-dev/issues/new"><img class="inline-icon" src="/static/hash-mh7qv2oc/img/bug-report-white-96px.png" alt="bug report" width="20" height="20" title="Report an issue with this site"/></a></footer><script src="/static/hash-mh7qv2oc/highlight/highlight-with-init.js" defer="defer"></script></body></html>