{"id":18508522,"url":"https://github.com/roundedinfinity/fluid_animations","last_synced_at":"2025-07-28T16:08:28.208Z","repository":{"id":228051589,"uuid":"772999727","full_name":"RoundedInfinity/fluid_animations","owner":"RoundedInfinity","description":"Create effortlessly smooth and responsive animations in your Flutter apps inspired by SwiftUI's spring animations.","archived":false,"fork":false,"pushed_at":"2024-09-24T12:21:22.000Z","size":1106,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T00:51:08.929Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/RoundedInfinity.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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":"2024-03-16T13:15:47.000Z","updated_at":"2025-04-03T20:33:06.000Z","dependencies_parsed_at":"2024-03-16T18:44:04.939Z","dependency_job_id":"d73e15d5-ada8-4a48-8ddf-ece14d488999","html_url":"https://github.com/RoundedInfinity/fluid_animations","commit_stats":null,"previous_names":["roundedinfinity/fluid_animations"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RoundedInfinity/fluid_animations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoundedInfinity%2Ffluid_animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoundedInfinity%2Ffluid_animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoundedInfinity%2Ffluid_animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoundedInfinity%2Ffluid_animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RoundedInfinity","download_url":"https://codeload.github.com/RoundedInfinity/fluid_animations/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoundedInfinity%2Ffluid_animations/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267543573,"owners_count":24104598,"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","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-06T15:14:37.812Z","updated_at":"2025-07-28T16:08:28.125Z","avatar_url":"https://github.com/RoundedInfinity.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fluid Animations\n\n[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link]\n[![Powered by Mason](https://img.shields.io/endpoint?url=https%3A%2F%2Ftinyurl.com%2Fmason-badge)](https://github.com/felangel/mason)\n[![License: MIT][license_badge]][license_link]\n\nCreate effortlessly smooth and responsive animations in your Flutter apps inspired by Apple's SwiftUI animations.\n\n![Demo Gif showing 2D Spring based animation](https://github.com/RoundedInfinity/fluid_animations/blob/main/demo/spring_2d.gif?raw=true)\n\n## Features \n\n- ⚡️ Effortlessly create smooth and responsive spring animations \n- 🎨 Choose from preset animation styles (bouncy, smooth, snappy, interactive, ...) \n- 🔧 Simplify creating smooth animations\n\n\n## Usage\n\nThe simplest way of creating a spring is using the prebuilt ones. For example:\n```dart\nfinal mySpring = FluidSpring.bouncy;\n```\n\nYou can also create custom springs. `FluidSpring` has two properties: `duration` and `bounce`.\n```dart\nfinal mySpring = FluidSpring(bounce: 0.4, duration: 0.5);\n```\n**Duration**: Defines the pace of the spring. This is approximately equal to the settling duration.\n\n\n**Bounce**: How bouncy the spring should be. A value of 0 indicates no bounces, positive values indicate increasing amounts of bounciness up to a maximum  of 1.0 (corresponding to undamped oscillation), and negative values indicate overdamped springs with a minimum value of -1.0.\n\n### Animating\n\nThe simplest way to animate your widgets with a spring is using the `FluidTransitionBuilder`. It animates all changes of `value` using a spring.\n\n```dart\nFluidTransitionBuilder\u003cdouble\u003e(\n  value: isHovered ? 200.0 : 100.0,\n  spring: FluidSpring.bouncy, // Use a bouncy spring animation\n  builder: (animation, child) {\n    return Container(\n      width: animation.value,\n      height: animation.value,\n      child: child,\n    );\n  },\n  child: const FlutterLogo()\n);\n```\n\nWhen you need more control over your animation you can also use a `AnimationController` and run a spring simulation.\n```dart\nfinal spring = FluidSpring.smooth;\n\nfinal simulation = SpringSimulation(spring, 0, 1, 0);\n\n_controller.animateWith(simulation);\n```\n\nSee the flutter example on how to [animate a widget using a physics simulation](https://docs.flutter.dev/cookbook/animation/physics-simulation).\n\n\n### Animate using keyframes\n\nYou can also create a complex custom animation using keyframes.\n\nThis example defines an animation that starts at 1 then interpolates to 0.8\nfor 20% of the animation's duration using a easing curve. Then it\ninterpolates to 1.4 for 50% of the duration using a spring and then\nsettles back to 1 for the last 30% of the animation using a different\nspring.\n\n```dart\nfinal Animation\u003cdouble\u003e scaleAnimation = KeyframeAnimation\u003cdouble\u003e(\n    startingValue: 1,\n    keyframes: const [\n      CurvedKeyframe(\n        value: 0.8,\n        duration: 0.2,\n        curve: Curves.easeIn,\n      ),\n      SpringKeyframe(\n        value: 1.4,\n        duration: 0.5,\n        spring: FluidSpring.bouncy,\n      ),\n      SpringKeyframe(\n        value: 1,\n        duration: 0.3,\n        spring: FluidSpring.smooth,\n        velocity: 2,\n      ),\n    ],\n  ).animate(myAnimationController);\n```\n\n### 2D Spring animations\n\nFor 2D animations (e.g. animating positions like those seen in the demo video), use the `SpringSimulation2D` class. Refer to the [example](https://github.com/RoundedInfinity/fluid_animations/blob/main/example/lib/main.dart) implementation for guidance.\n\n## Acknowledgements\n\nThe math used is based on this [amazing article](https://github.com/jenox/UIKit-Playground/tree/master/01-Demystifying-UIKit-Spring-Animations/).\n\nValues for the prebuilt springs are from the [Apple Documentation](https://developer.apple.com/documentation/swiftui/animation) on animation.\n\n[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg\n[license_link]: https://opensource.org/licenses/MIT\n[mason_link]: https://github.com/felangel/mason\n[very_good_analysis_badge]: https://img.shields.io/badge/style-very_good_analysis-B22C89.svg\n[very_good_analysis_link]: https://pub.dev/packages/very_good_analysis\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froundedinfinity%2Ffluid_animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froundedinfinity%2Ffluid_animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froundedinfinity%2Ffluid_animations/lists"}