{"id":25319676,"url":"https://github.com/aghajari/composelayoutanimation","last_synced_at":"2025-11-09T09:05:06.480Z","repository":{"id":275278822,"uuid":"925269748","full_name":"Aghajari/ComposeLayoutAnimation","owner":"Aghajari","description":"A Jetpack Compose library equivalent to ViewGroup's layoutAnimation, enabling staggered entrance animations for layout children.","archived":false,"fork":false,"pushed_at":"2025-02-01T10:42:39.000Z","size":1529,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T11:27:30.094Z","etag":null,"topics":["android-compose","compose-ui","layout-animation"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aghajari.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-31T15:01:45.000Z","updated_at":"2025-02-01T10:42:42.000Z","dependencies_parsed_at":"2025-02-01T11:27:33.734Z","dependency_job_id":"5050abe8-0914-4d8b-ad77-7d380c52533f","html_url":"https://github.com/Aghajari/ComposeLayoutAnimation","commit_stats":null,"previous_names":["aghajari/composelayoutanimation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aghajari%2FComposeLayoutAnimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aghajari%2FComposeLayoutAnimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aghajari%2FComposeLayoutAnimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aghajari%2FComposeLayoutAnimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aghajari","download_url":"https://codeload.github.com/Aghajari/ComposeLayoutAnimation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238734068,"owners_count":19521557,"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":["android-compose","compose-ui","layout-animation"],"created_at":"2025-02-13T20:54:36.765Z","updated_at":"2025-10-28T22:31:09.008Z","avatar_url":"https://github.com/Aghajari.png","language":"Kotlin","readme":"# ComposeLayoutAnimation\n[![Platform](https://img.shields.io/badge/platform-android-green.svg)](http://developer.android.com/index.html)\n[![API](https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat)](https://android-arsenal.com/api?level=21)\n[![Maven Central](https://img.shields.io/maven-central/v/io.github.aghajari/ComposeLayoutAnimation.svg?label=Maven%20Central)](https://search.maven.org/artifact/io.github.aghajari/ComposeLayoutAnimation/1.0.0/aar)\n[![Join the chat at https://gitter.im/Aghajari/community](https://badges.gitter.im/Aghajari/community.svg)](https://gitter.im/Aghajari/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nA Jetpack Compose library equivalent to ViewGroup's layoutAnimation, providing staggered entrance animations for layout children with support for both pre-built and custom animations.\n\n**ComposeLayoutAnimation** simplifies the process of adding entrance animations to layout children in Jetpack Compose. Just like ViewGroup's layoutAnimation in traditional Android development, this library allows you to define an animation that automatically applies to all children of a layout with configurable delay between items.\n\nThe library provides two types of animations:\n- **GraphicsLayer Modifications**: Visual-only animations like fade, scale, and rotation that don't affect layout measurements\n- **Layout Modifications**: Animations that affect actual layout like slide and expand\n\n\u003cimg src=\"./images/pre_built.gif\" width=\"400\"/\u003e\n\n## Features\n- Staggered animations for layout children\n- Pre-built animation templates\n- Custom animation support\n- Simple API for combining animations\n- Layout and GraphicsLayer animations\n- Supports all Compose Layouts including `Column`, `Row`, `LazyColumn`, `LazyRow`, and `LazyVerticalGrid`\n\n## Installation\n\n**ComposeLayoutAnimation** is available on `mavenCentral()`, Add the dependency to your app's `build.gradle`:\n\n```groovy\ndependencies {\n    implementation 'io.github.aghajari:ComposeLayoutAnimation:1.0.1'\n}\n```\n\n## Usage\nBasic usage with a simple animation:\n\n```kotlin\nColumn {\n    LayoutAnimation(\n        animationSpec = LayoutAnimationSpec(\n            delayMillisBetweenItems = 50,\n        ) {\n            fade(from = 0f, to = 1f) with\n                    translationY(from = 0f, to = 100f) then\n                    translationY(from = 100f, to = 0f)\n        },\n    ) {\n        repeat(5) { index -\u003e\n            CardItem(\n                text = \"Item $index\",\n                modifier = Modifier.animateLayoutItem(),\n            )\n        }\n    }\n}\n```\n\n\u003cb\u003eNote:\u003c/b\u003e Use `Modifier.animateLazyLayoutItem()` for Lazy layouts\n\nOutput:\n\n\u003cimg src=\"./images/custom.gif\" width=\"300\"/\u003e\n\nBasic usage with a pre-built animation:\n```kotlin\nLayoutAnimation(animationSpec = fallDownAnimationSpec()) {\n  ...\n}\n```\n\n## Pre-built Animations\nReady-to-use animations for common scenarios:\n\n- `fallDownAnimationSpec()`: Items fade in while falling from above\n- `bounceAnimationSpec()`: Items bounce up from bottom\n- `spiralAnimationSpec()`: Items spiral in with rotation\n- `flipAnimationSpec()`: Items flip in vertically\n- `origamiUnfoldAnimationSpec()`: 3D paper unfolding effect\n- `perspectiveRevealAnimationSpec()`: 3D perspective swing effect\n- `elasticSnapAnimationSpec()`: Elastic snapping from side\n- `cascadeDropAnimationSpec()`: Cascading drop with rotation\n- `swivelRevealAnimationSpec()`: 3D door-like opening effect\n- `elegantEntranceAnimationSpec()`: Sophisticated entrance with combined effects\n\n## Animation Composition\nCombine animations using various operators:\n\n```kotlin\n// Parallel animations\nfade() + scale()           // Using +\nfade() with scale()        // Using 'with' infix function\ntogether(fade(), scale())  // Using together()\n\n// Sequential animations\nfade() then scale()        // Using 'then' infix function\nsequence(fade(), scale())  // Using sequence()\n```\n\n## Animation Configuration\nEvery animation, whether pre-built or custom, can be configured with:\n- `durationMillis`: Duration of the animation\n- `delayMillis`: Delay before the animation starts\n- `delayMillisBetweenItems`: Stagger delay between items\n- `easing`: Easing curve for the animation\n- `repeatMode`: How the animation should repeat (Restart or Reverse)\n- `repeatIterations`: Number of times to repeat\n\n## Create Custom Animations\nShare your animations with us :))\n\n``` kotlin\nfun cascadeDropAnimationSpec(\n    initialDelayMillis: Int = 0,\n    durationMillis: Int = 1700,\n    delayMillisBetweenItems: Int = (durationMillis * 0.2).toInt(),\n    easing: Easing = FastOutSlowInEasing,\n): LayoutAnimationSpec {\n    return LayoutAnimationSpec(\n        initialDelayMillis = initialDelayMillis,\n        delayMillisBetweenItems = delayMillisBetweenItems,\n    ) {\n        translationY(\n            durationMillis = (durationMillis * 0.5).toInt(),\n            easing = easing,\n            from = -200f,\n            to = 0f,\n        ) + rotationZ(\n            durationMillis = (durationMillis * 0.5).toInt(),\n            easing = easing,\n            from = -15f,\n            to = 0f,\n        ) + fade(\n            durationMillis = (durationMillis * 0.3).toInt(),\n            easing = LinearEasing,\n            from = 0f,\n            to = 1f,\n        )\n    }\n}\n```\n\n\u003cimg src=\"./images/cascade.gif\" width=\"400\"/\u003e\n\nLicense\n=======\n\n    Copyright 2025 Amir Hossein Aghajari\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"64\" alt=\"LCoders | AmirHosseinAghajari\" src=\"https://user-images.githubusercontent.com/30867537/90538314-a0a79200-e193-11ea-8d90-0a3576e28a18.png\"\u003e\n  \u003cbr\u003e\u003ca\u003eAmir Hossein Aghajari\u003c/a\u003e • \u003ca href=\"mailto:amirhossein.aghajari.82@gmail.com\"\u003eEmail\u003c/a\u003e • \u003ca href=\"https://github.com/Aghajari\"\u003eGitHub\u003c/a\u003e\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faghajari%2Fcomposelayoutanimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faghajari%2Fcomposelayoutanimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faghajari%2Fcomposelayoutanimation/lists"}