{"id":15056132,"url":"https://github.com/iamgio/animated","last_synced_at":"2025-07-19T13:36:03.245Z","repository":{"id":45662780,"uuid":"358350360","full_name":"iamgio/animated","owner":"iamgio","description":":ocean: Modern animation library for JavaFX.","archived":false,"fork":false,"pushed_at":"2023-10-28T14:22:07.000Z","size":319,"stargazers_count":168,"open_issues_count":1,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-10T04:06:38.924Z","etag":null,"topics":["animated-javafx","animation","animation-library","animations","implicit-animations","javafx","javafx-animation","javafx-animation-library","javafx-library","transitions"],"latest_commit_sha":null,"homepage":"","language":"Java","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/iamgio.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2021-04-15T18:06:52.000Z","updated_at":"2025-04-07T14:14:17.000Z","dependencies_parsed_at":"2023-01-30T19:16:00.196Z","dependency_job_id":"e8bbe7fc-759a-48f0-882f-87230232658a","html_url":"https://github.com/iamgio/animated","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamgio%2Fanimated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamgio%2Fanimated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamgio%2Fanimated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamgio%2Fanimated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamgio","download_url":"https://codeload.github.com/iamgio/animated/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154983,"owners_count":21056543,"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":["animated-javafx","animation","animation-library","animations","implicit-animations","javafx","javafx-animation","javafx-animation-library","javafx-library","transitions"],"created_at":"2024-09-24T21:48:12.212Z","updated_at":"2025-04-10T04:06:44.700Z","avatar_url":"https://github.com/iamgio.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# animated\n\n**animated** introduces **implicit animations**, a completely new concept in JavaFX strongly inspired by [Flutter's animations and motion widgets](https://flutter.dev/docs/development/ui/widgets/animation).\n\n### Index\n1. [Getting started](#getting-started)\n2. [Implicit animations](#implicit-animations)\n3. [Animated containers](#animated-containers)\n4. [Animated switchers](#animated-switchers)\n5. [Animated theme switch](#animated-theme-switch)\n6. [Animated values](#animated-values)\n7. [Other examples](#other-examples)\n8. [FXML](#fxml)\n9. [Kotlin extensions](#kotlin-extensions)\n\n## Getting started\n\nMaven:\n```xml\n\u003cdependency\u003e\n    \u003cgroupId\u003eeu.iamgio\u003c/groupId\u003e\n    \u003cartifactId\u003eanimated\u003c/artifactId\u003e\n    \u003cversion\u003e1.3.0\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\nGradle:\n```gradle\nallprojects {\n    repositories {\n        mavenCentral()\n    }\n}\ndependencies {\n    implementation 'eu.iamgio:animated:1.3.0'\n}\n```\n\n\u003e **Note**: v1.0.0 brought several important changes, including a different project structure,\n\u003e that may cause compilation errors when upgrading from 0.x versions.  \n\u003e Please check the [migration guide](https://github.com/iamgio/animated/releases/tag/v1.0.0) to see what changed and quickly learn how to fix those errors.\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Implicit animations\n\nForget about timelines, explicit animations and other stuff that pollutes your code. This animation system will provide versatility to your code and interface.\n\n![Demo](https://i.imgur.com/TKXA8de.gif)  \n**[Code](src/test/java/eu/iamgio/animatedtest/AnimatedTest.java)**\n\n```java\nAnimated animated = new Animated(child, AnimationProperty.of(child.opacityProperty()));\nroot.getChildren().add(animated);\n\n// Later...\nchild.setOpacity(0.5); // Plays the transition\n```  \n\nThis approach instantiates an `Animated` node that contains one child and is bound to a property.  \nNow that we have set an animated bound, we can see that `child.setOpacity(someValue)` creates a transition between the initial and final value.\n\nA single `Animated` object can take multiple properties at once,\nand they can also be added later by accessing `Animated#getTargetProperties`. \n\n### Presets\n[Pre-made animation properties](src/main/java/eu/iamgio/animated/binding/presets) represent a concise and efficient\nway to create animated bindings, rather than manually referencing to the\nraw JavaFX property as we previously did.\n\n- `AnimatedBlur`\n- `AnimatedColor`\n- `AnimatedDropShadow.Color`\n- `AnimatedDropShadow.Radius`\n- `AnimatedLayout`\n- `AnimatedOpacity`\n- `AnimatedPrefSize`\n- `AnimatedRotation`\n- `AnimatedScale`\n- `AnimatedTranslatePosition`\n\nWhen these properties are instantiated via their zero-arguments constructor,\nthe target node references to the `Animated`'s child. \n\n```java\n// Before\nnew Animated(child,\n        AnimationProperty.of(child.prefWidthProperty()),\n        AnimationProperty.of(child.prefHeightProperty())\n);\n\n// After: better!\nnew Animated(child, new AnimatedPrefSize());\n```\n\n### Independent animations\n\n`Animated` is a node that has to be added to the scene in order to work.  \nHere is a different approach that is independent from the scene:\n\n```java\nAnimationProperty.of(node.opacityProperty()).register();\n// or\nnew AnimatedOpacity(node).register();\n\n// Later...\nnode.setOpacity(0.5); // Plays the transition\n```\n\n\u003e Animations are not only visual:\n\u003e you can also animate other changes such as audio volume!\n\n### Custom animations\n\nThe default animation is linear and lasts 1 second.\nIt can be customized by calling `withSettings(AnimationSettings settings)` or `custom(Function\u003cAnimationSettings, AnimationSettings\u003e settings)`,\nboth methods available on animated nodes and animation properties.\n\nExamples:\n```java\nAnimated animated = new Animated(child, AnimationProperty.of(child.opacityProperty()));\n    .custom(settings -\u003e settings.withDuration(Duration.seconds(.5)).withCurve(Curve.EASE_IN_OUT));\n```  \n\n```java\nAnimated animated = new Animated(child,\n    new AnimatedOpacity()\n        .custom(settings -\u003e settings.withDuration(Duration.seconds(.8))),\n    new AnimatedRotation()\n        .custom(settings -\u003e settings.withDuration(Duration.seconds(.5))),\n).custom(settings -\u003e settings.withCurve(Curve.EASE_OUT));\n```\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Animated containers\n\n**animated** provides custom implementations of `VBox` and `HBox` that animate their content whenever their children are affected by a change.  \nThis feature is based on animations from [AnimateFX](https://github.com/Typhon0/AnimateFX).\n\n![Demo](https://i.imgur.com/jqm9KDA.gif)  \n**[Code](src/test/java/eu/iamgio/animatedtest/AnimatedContainerTest.java)**\n\n**Constructors**:\n- `Animation in, Animation out` wraps two `AnimateFX` objects into customizable `animated` objects;\n- `AnimationFX in, AnimationFX out` takes two raw AnimateFX animations that cannot be customized;\n- `AnimationPair animation` takes a pair of animations, mostly used with pre-made pairs (e.g. `AnimationPair.fade()`).\n\n`pause()` and `resume()` allow disabling/enabling animations so that you can switch back to the regular implementation and forth.\n\nExample:\n```java\nAnimatedVBox vBox = new AnimatedVBox(AnimationPair.fade());\n\n// Later...\nvBox.getChildren().add(someNode);    // someNode fades in\nvBox.getChildren().remove(someNode); // someNode fades out\n```\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Animated switchers\n\nThe library also provides an `AnimatedSwitcher` node that creates a transition whenever its child changes.  \nAs for animated containers, this feature relies on AnimateFX.\n\n![Demo](https://i.imgur.com/8v2Wn0a.gif)  \n**[Code](src/test/java/eu/iamgio/animatedtest/AnimatedSwitcherTest.java)**\n\nSee [animated containers](#animated-containers) for information about constructors.  \nRight after the instantiation, calling `of(Node child)` will set the initial child without any animation played.\n\nExample:\n```java\nAnimatedSwitcher switcher = new AnimatedSwitcher(\n    new Animation(new FadeInDown()).setSpeed(2), \n    new Animation(new FadeOutDown()).setSpeed(1.5)\n).of(firstChild);\nroot.getChildren().add(switcher);\n\n// Later...\nswitcher.setChild(secondChild); // Plays the transition\n```\n\n### Related: animated text\n\n`AnimatedLabel` uses a switcher to animate text.\n\nExample:\n```java\nAnimatedLabel label = new AnimatedLabel(\"Text\", AnimationPair.fade());\n\n// Later...\nlabel.setText(\"New text\"); // Plays the transition\n```\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Animated theme switch\n\nIt is possible to create a transition whenever the stylesheets of the scene change via `AnimatedThemeSwitcher`, based on AnimateFX.\n\n\n![Theme](https://i.imgur.com/Wwma43y.gif)  \n**[Code](src/test/java/eu/iamgio/animatedtest/AnimatedThemeTest.java)**\n\n```java\nscene.getStylesheets().setAll(\"/light.css\"); // Initial theme\nAnimatedThemeSwitcher themeSwitcher = new AnimatedThemeSwitcher(scene, new CircleClipOut());\nthemeSwitcher.init(); // Required!\n\n// Later...\nscene.getStylesheets().setAll(\"/dark.css\"); // Plays the transition\n\n// This also works with add, set, remove and other List methods.\n```\n\n\u003e **Note** that not every type of root can be animated properly, such as `VBox` and `HBox`.\n\u003e Parents that allow overlapping children, i.e. `Pane`, are suggested. \n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Animated values\n\nThe animated binding API provides a way to animate the content of a `Label`\nevery time its associated value changes.  \n\n\n![Currency](https://i.imgur.com/9TZmEzl.gif)  \n**[Code](src/test/java/eu/iamgio/animatedtest/AnimatedCurrencyTest.java)**\n\n```java\nAnimatedValueLabel\u003cInteger\u003e label = new AnimatedValueLabel\u003c\u003e(0)\n                .custom(settings -\u003e settings.withCurve(Curve.EASE_IN_OUT));\n\n// We can also customize the displayed text\nlabel.setTextMapper(value -\u003e \"The value is \" + value);\n\n// Later...\nlabel.setValue(10); // Plays the transition\n```\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Other examples\n\n![Button](https://i.imgur.com/mVGkKcx.gif)  \n**[Button color and border](src/test/java/eu/iamgio/animatedtest/AnimatedButtonTest.java)**\n\n![Shadow](https://i.imgur.com/jd8Bbr4.gif)  \n**[Drop shadows + label](src/test/java/eu/iamgio/animatedtest/AnimatedShadowTest.java)**\n\n![Root switch](https://i.imgur.com/cYkSu9z.gif)  \n**[Root switch](src/test/java/eu/iamgio/animatedtest/AnimatedRootSwitchTest.java)**\n\n![Layout alignment](https://i.imgur.com/xNRltwq.gif)  \n**[Layout alignment](src/test/java/eu/iamgio/animatedtest/AnimatedLayoutTest.java)** (inspired by the Edge home page)\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## FXML\n\n- **Animated**\n  ```xml\n  \u003c?import eu.iamgio.animated.binding.Animated?\u003e\n  \u003c?import eu.iamgio.animated.binding.AnimationSettings?\u003e\n  \u003c?import eu.iamgio.animated.binding.presets.AnimatedOpacity?\u003e\n  \n  \u003cAnimated\u003e\n        \u003cchild\u003e\n            \u003cMyNode/\u003e\n        \u003c/child\u003e\n        \u003ctargetProperties\u003e\n            \u003c!-- Properties to animate, related to the current child --\u003e\n            \u003cAnimatedOpacity\u003e\n                \u003csettings\u003e\n                    \u003cAnimationSettings duration=\"1500ms\" curve=\"EASE_IN_OUT\"/\u003e\n                \u003c/settings\u003e\n            \u003c/AnimatedOpacity\u003e\n            \u003c!-- Multiple properties are supported --\u003e\n        \u003c/targetProperties\u003e\n    \u003c/Animated\u003e\n  ```\n\n- **AnimatedContainer**\n  ```xml\n  \u003c?import eu.iamgio.animated.transition.container.AnimatedHBox?\u003e\n  \u003c?import eu.iamgio.animated.transition.Animation?\u003e\n\n  \u003cAnimatedHBox\u003e\n      \u003c!-- Optional: defaults to FadeIn --\u003e\n      \u003cin\u003e\n          \u003cAnimation type=\"ZoomIn\"/\u003e\n      \u003c/in\u003e\n      \u003c!-- Optional: defaults to FadeOut --\u003e\n      \u003cout\u003e\n          \u003cAnimation type=\"ZoomOut\"/\u003e\n      \u003c/out\u003e\n      \u003c!-- Optional initial children --\u003e\n      \u003cMyNode1/\u003e      \n      \u003cMyNode2/\u003e\n      \u003c!-- ... --\u003e      \n  \u003c/AnimatedHBox\u003e\n  ```\n\n- **AnimatedSwitcher**  \n  ```xml\n  \u003c?import eu.iamgio.animated.transition.AnimatedSwitcher?\u003e\n  \u003c?import eu.iamgio.animated.transition.Animation?\u003e\n  \n  \u003cAnimatedSwitcher\u003e\n      \u003c!-- Optional: defaults to FadeIn --\u003e\n      \u003cin\u003e\n          \u003cAnimation type=\"RectangleClipIn\"/\u003e\n      \u003c/in\u003e\n      \u003c!-- Optional: defaults to FadeOut --\u003e\n      \u003cout\u003e\n          \u003cAnimation type=\"SlideOutUp\" speed=\"0.5\"/\u003e\n      \u003c/out\u003e\n      \u003c!-- Optional initial child --\u003e\n      \u003cchild\u003e\n          \u003cInitialChild/\u003e\n      \u003c/child\u003e\n  \u003c/AnimatedSwitcher\u003e\n  ```\n  \n- **AnimatedLabel**  \n  ```xml\n  \u003c?import eu.iamgio.animated.transition.AnimatedLabel?\u003e\n  \u003c?import eu.iamgio.animated.transition.Animation?\u003e\n  \n  \u003cAnimatedLabel text=\"Initial text\"\u003e\n      \u003c!-- Optional: defaults to FadeIn --\u003e\n      \u003cin\u003e\n          \u003cAnimation type=\"BounceIn\" delay=\"300ms\"/\u003e\n      \u003c/in\u003e\n      \u003c!-- Optional: defaults to FadeOut --\u003e\n      \u003cin\u003e\n          \u003cAnimation type=\"BounceOut\"/\u003e\n      \u003c/in\u003e\n  \u003c/AnimatedLabel\u003e\n  ```  \n\n- **AnimatedValueLabel**  \n  FXML has issues with generic types, so you will need to instantiate an\n  `AnimatedIntValueLabel` or `AnimatedDoubleValueLabel`.  \n  ```xml\n  \u003c?import eu.iamgio.animated.binding.AnimationSettings?\u003e\n  \u003c?import eu.iamgio.animated.binding.value.AnimatedIntValueLabel?\u003e\n  \n  \u003cAnimatedIntValueLabel value=\"0\"\u003e\n      \u003c!-- Optional customization --\u003e\n      \u003csettings\u003e\n          \u003cAnimationSettings duration=\"1500ms\" curve=\"EASE_IN_OUT\"/\u003e\n      \u003c/settings\u003e\n  \u003c/AnimatedIntValueLabel\u003e\n  ```\n\n\u003cbr\u003e\n\n\u003e When instantiating an `\u003cAnimation type=\"...\"/\u003e`,\n\u003e the class name (case sensitive) is searched in the following packages:\n\u003e - [`animatefx.animation`](https://github.com/Typhon0/AnimateFX/tree/master/animatefx/src/main/java/animatefx/animation)\n\u003e - [`eu.iamgio.animated.transition.animations`](src/main/java/eu/iamgio/animated/transition/animations) and sub-packages\n\n\n\u003cbr/\u003e\n\n---\n\n\u003cbr/\u003e\n\n## Kotlin extensions\n\n[Extension functions](src/main/kotlin/eu/iamgio/animated/AnimatedExtensions.kt) make the library less verbose with Kotlin.  \nExample:\n```kotlin\nval animated: Animated = Animated(child, child.someProperty().animated())\nval pair: AnimationPair = FadeIn().options(speed = 1.5) outTo FadeOut()\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamgio%2Fanimated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamgio%2Fanimated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamgio%2Fanimated/lists"}