{"id":19521801,"url":"https://github.com/smarttoolfactory/compose-animatedlist","last_synced_at":"2025-10-18T15:42:52.408Z","repository":{"id":65711113,"uuid":"533767752","full_name":"SmartToolFactory/Compose-AnimatedList","owner":"SmartToolFactory","description":"🚀📱💖Animated LazyColumn/Row changes scale/color with animation and have a current selected item like a Pager. An elegant alternative for selecting from a list","archived":false,"fork":false,"pushed_at":"2023-07-27T10:12:25.000Z","size":223,"stargazers_count":95,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T10:24:42.944Z","etag":null,"topics":["android","animated-list","animated-lists","jetpack-compose","lazycolumn","lazyrow"],"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/SmartToolFactory.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":"2022-09-07T13:03:08.000Z","updated_at":"2025-03-07T09:37:10.000Z","dependencies_parsed_at":"2024-11-11T00:45:24.913Z","dependency_job_id":null,"html_url":"https://github.com/SmartToolFactory/Compose-AnimatedList","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-AnimatedList","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-AnimatedList/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-AnimatedList/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SmartToolFactory%2FCompose-AnimatedList/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SmartToolFactory","download_url":"https://codeload.github.com/SmartToolFactory/Compose-AnimatedList/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967125,"owners_count":21515541,"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","animated-list","animated-lists","jetpack-compose","lazycolumn","lazyrow"],"created_at":"2024-11-11T00:35:00.116Z","updated_at":"2025-10-18T15:42:52.330Z","avatar_url":"https://github.com/SmartToolFactory.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Compose AnimatedList\n\n[![](https://jitpack.io/v/SmartToolFactory/Compose-AnimatedList.svg)](https://jitpack.io/#SmartToolFactory/Compose-AnimatedList)\n\nAnimated infinite and finite LazyRow and LazyColumn with scale and color animations on scroll change\nbased on how far they are to selector items\n\nhttps://user-images.githubusercontent.com/35650605/190077938-89d9f79a-06df-4052-b1fa-eee5651bd861.mp4\n\n## Gradle Setup\n\nTo get a Git project into your build:\n\n* Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end\n  of repositories:\n\n```\nallprojects {\n  repositories {\n      ...\n      maven { url 'https://jitpack.io' }\n  }\n}\n```\n\n* Step 2. Add the dependency\n\n```\ndependencies {\n    implementation 'com.github.SmartToolFactory:Compose-AnimatedList:Tag'\n}\n```\n\n## AnimatedInfiniteLazyRow/Column\n\n### Declaration\n\n```kotlin\n@Composable\nfun \u003cT\u003e AnimatedInfiniteLazyColumn(\n    modifier: Modifier = Modifier,\n    items: List\u003cT\u003e,\n    initialFistVisibleIndex: Int = 0,\n    visibleItemCount: Int = 5,\n    inactiveItemPercent: Int = 85,\n    spaceBetweenItems: Dp = 4.dp,\n    selectorIndex: Int = -1,\n    itemScaleRange: Int = 1,\n    showPartialItem: Boolean = false,\n    activeColor: Color = Color.Cyan,\n    inactiveColor: Color = Color.Gray,\n    key: ((index: Int) -\u003e Any)? = null,\n    contentType: (index: Int) -\u003e Any? = { null },\n    itemContent: @Composable LazyItemScope.(\n        animationProgress: AnimationProgress,\n        index: Int,\n        item: T,\n        size: Dp,\n        lazyListState: LazyListState\n    ) -\u003e Unit\n) {\n    AnimatedInfiniteList(\n        modifier = modifier,\n        items = items,\n        initialFirstVisibleIndex = initialFistVisibleIndex,\n        visibleItemCount = visibleItemCount,\n        inactiveItemPercent = inactiveItemPercent,\n        spaceBetweenItems = spaceBetweenItems,\n        selectorIndex = selectorIndex,\n        itemScaleRange = itemScaleRange,\n        showPartialItem = showPartialItem,\n        activeColor = activeColor,\n        inactiveColor = inactiveColor,\n        orientation = Orientation.Vertical,\n        key = key,\n        contentType = contentType,\n        itemContent = itemContent\n    )\n}\n```\n\n```kotlin\n@Composable\nfun \u003cT\u003e AnimatedInfiniteLazyRow(\n    modifier: Modifier = Modifier,\n    items: List\u003cT\u003e,\n    initialFistVisibleIndex: Int = 0,\n    activeItemWidth: Dp,\n    inactiveItemWidth: Dp,\n    visibleItemCount: Int = 5,\n    spaceBetweenItems: Dp = 4.dp,\n    selectorIndex: Int = -1,\n    itemScaleRange: Int = 1,\n    showPartialItem: Boolean = false,\n    activeColor: Color = ActiveColor,\n    inactiveColor: Color = InactiveColor,\n    key: ((index: Int) -\u003e Any)? = null,\n    contentType: (index: Int) -\u003e Any? = { null },\n    itemContent: @Composable LazyItemScope.(\n        animationProgress: AnimationProgress,\n        index: Int,\n        item: T,\n        size: Dp,\n        lazyListState: LazyListState\n    ) -\u003e Unit\n) \n```\n\n### Params\n\n* **items** the data list\n* **visibleItemCount** count of items that are visible at any time\n* **inactiveItemPercent** percentage of scale that items inside **itemScaleRange**\n* can be scaled down to. This is a number between 0 and 100\n* **spaceBetweenItems** padding between 2 items\n* **selectorIndex** index of selector. When **itemScaleRange** is odd number it's center of selected\n  item, when **itemScaleRange** is even number it's center of item with selector index and the one\n  next to it\n* **itemScaleRange** range of area of scaling. When this value is odd any item that enters half of\n  item size range subject to being scaled. When this value is even any item in 2 item size range is\n  subject to being scaled\n* **showPartialItem** show items partially that are at the start and end\n* **activeColor** color of selected item\n* **inactiveColor** color of items are not selected\n* **key** a factory of stable and unique keys representing the item. Using the same key for multiple\n  items in the list is not allowed. Type of the key should be savable via Bundle on Android. If\n  null is passed the position in the list will represent the key. When you specify the key the\n  scroll position will be maintained based on the key, which means if you add/remove items before\n  the current visible item the item with the given key will be kept as the first visible one.\n* **contentType** a factory of the content types for the item. The item compositions of the same\n  type could be reused more efficiently. Note that null is a valid type and items of such type will\n  be considered compatible.\n* **itemContent** the content displayed by a single item\n\n### Usage\n\nitemContent returns `AnimationProgress` which contains `LazyListState` and\ndistance of each item to selector. By attaching a click modifier\n\n```kotlin\nAnimatedInfiniteLazyRow(\n    modifier = Modifier\n        .width(listWidth)\n        .padding(10.dp),\n    items = aspectRatios,\n    visibleItemCount = 5,\n    activeItemWidth = 40.dp,\n    inactiveItemWidth = 30.dp,\n    selectorIndex = 1,\n    spaceBetweenItems = 0.dp,\n    inactiveColor = InactiveColor,\n    activeColor = ActiveColor,\n    itemContent = { animationProgress, index, item, width, lazyListState -\u003e\n        val color = animationProgress.color\n        val scale = animationProgress.scale\n        Box(\n            modifier = Modifier\n                .scale(scale)\n                .background(color, CircleShape)\n                .size(width)\n                .clickable(\n                    interactionSource = remember {\n                        MutableInteractionSource()\n                    },\n                    indication = null\n                ) {\n                    coroutineScope.launch {\n                        lazyListState.animateScrollBy(animationProgress.distanceToSelector)\n                    }\n                },\n            contentAlignment = Alignment.Center\n        ) {\n\n            Text(\n                \"$index\",\n                color = Color.White,\n                fontSize = 20.sp,\n                fontWeight = FontWeight.Bold\n            )\n        }\n    }\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-animatedlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmarttoolfactory%2Fcompose-animatedlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmarttoolfactory%2Fcompose-animatedlist/lists"}