{"id":13659636,"url":"https://github.com/ismai117/kottie","last_synced_at":"2026-01-11T16:57:01.247Z","repository":{"id":215338644,"uuid":"738651050","full_name":"ismai117/kottie","owner":"ismai117","description":"Render After Effects Animations Library - Compose Multiplatform |  Inspired by Airbnb/Lottie","archived":false,"fork":false,"pushed_at":"2024-10-19T16:11:46.000Z","size":75832,"stargazers_count":214,"open_issues_count":3,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-10T13:36:45.827Z","etag":null,"topics":[],"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/ismai117.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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-01-03T18:09:41.000Z","updated_at":"2024-11-08T14:53:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"460ce9f8-913b-47d9-a76c-ed7f613c712d","html_url":"https://github.com/ismai117/kottie","commit_stats":null,"previous_names":["ismai117/kottie"],"tags_count":26,"template":false,"template_full_name":"KevinnZou/compose-multiplatform-library-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismai117%2Fkottie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismai117%2Fkottie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismai117%2Fkottie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ismai117%2Fkottie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ismai117","download_url":"https://codeload.github.com/ismai117/kottie/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250654123,"owners_count":21465815,"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":[],"created_at":"2024-08-02T05:01:10.770Z","updated_at":"2026-01-11T16:57:01.241Z","avatar_url":"https://github.com/ismai117.png","language":"Kotlin","funding_links":[],"categories":["Libraries","Uncategorized"],"sub_categories":["🍎 Compose UI","Uncategorized"],"readme":"[![Latest release](https://img.shields.io/github/v/release/ismai117/kottie?color=brightgreen\u0026label=latest%20release)](https://github.com/ismai117/kottie/releases/latest)\n[![Latest build](https://img.shields.io/github/v/release/ismai117/kottie?color=orange\u0026include_prereleases\u0026label=latest%20build)](https://github.com/ismai117/kottie/releases)\n\u003cbr\u003e\n \n\u003ch1 align=\"center\"\u003eKottie\u003c/h1\u003e\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e\nCompose Multiplatform animation library that parses Adobe After Effects animations. Inspired by Airbnb/Lottie.\n\u003c/p\u003e\n\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Platform Android\" src=\"https://img.shields.io/badge/Platform-Android-brightgreen\"/\u003e\n  \u003cimg alt=\"Platform iOS\" src=\"https://img.shields.io/badge/Platform-iOS-lightgray\"/\u003e\n  \u003cimg alt=\"Platform JVM\" src=\"https://img.shields.io/badge/Platform-JVM-orange\"/\u003e\n  \u003cimg alt=\"Platform Js\" src=\"https://img.shields.io/badge/Platform-Js-yellow\"/\u003e\n  \u003cimg alt=\"Platform Js\" src=\"https://img.shields.io/badge/Platform-Wasm-purple\"/\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/ismai117/kottie/assets/88812838/1f46e16b-2fff-4fff-8a33-5d954b9e0c03\" alt=\"Kottie\" width=\"400\"/\u003e\n\u003c/p\u003e \u003c/br\u003e\n\n## Getting Started\n\nTo integrate Kottie into your Kotlin Multiplatform project\n\nAdd the dependency in your common module's commonMain source set\n\n```\nimplementation(\"io.github.ismai117:kottie:latest_version\")\n```\n\nIn Xcode, select “File” → “Add Packages...”\n\u003c/br\u003e\nEnter https://github.com/airbnb/lottie-spm.git\n\n\u003cbr\u003e\n\n## Load Animation Composition\n\nLoad the animation composition using rememberKottieComposition function. Choose the appropriate specification for loading the composition (File, Url, or JsonString).\n\n```Kotlin\n\nvar animation by remember { mutableStateOf(\"\") }\n\nLaunchedEffect(Unit){\n    animation = Res.readBytes(\"files/animation.json\").decodeToString()\n}\n\nval composition = rememberKottieComposition(\n    spec = KottieCompositionSpec.File(animation) // Or KottieCompositionSpec.Url || KottieCompositionSpec.JsonString\n)\n```\n\n## Display the Animation\n\nDisplay the animation using KottieAnimation composable\n\n```Kotlin\nMaterialTheme {\n\n    Column(\n        modifier = modifier.fillMaxSize(),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n\n        KottieAnimation(\n            composition = composition,\n            progress = { animationState.progress },\n            modifier = modifier.size(300.dp)\n        )\n\n    }\n}\n```\n\n## Control Animation Playback\n\nYou can control animation playback by using a mutableStateOf variable to toggle the animation on and off.\n\n```Kotlin\nvar playing by remember { mutableStateOf(false) }\n\nval animationState by animateKottieCompositionAsState(\n    composition = composition,\n    isPlaying = playing\n)\n\nMaterialTheme {\n\n    Column(\n        modifier = modifier.fillMaxSize(),\n        horizontalAlignment = Alignment.CenterHorizontally,\n        verticalArrangement = Arrangement.Center\n    ) {\n\n        KottieAnimation(\n            composition = composition,\n            progress = { animationState.progress },\n            modifier = modifier.size(300.dp)\n        )\n\n        Button(\n           onClick = {\n              playing = true\n           }\n        ){\n           Text(\"Play\")\n        }\n\n    }\n}\n\n```\n\n## Adjusting Speed\n\nTo change the playback speed of the animation, modify the speed parameter in the animateKottieCompositionAsState function. By default, the speed is set to 1f, indicating normal speed playback. You can increase the speed for faster playback or decrease it for slower playback.\n\n```Kotlin\nval animationState by animateKottieCompositionAsState(\n    composition = composition,\n    speed = 1.5f // Adjust the speed as needed\n)\n```\n\n## Set Iterations\n\nBy default, the animation plays once and stops (iterations = 1). You can specify the number of times the animation should repeat using the iterations parameter. Alternatively, you can set it to KottieConstants.IterateForever for the animation to loop indefinitely.\n\n```Kotlin\nval animationState by animateKottieCompositionAsState(\n    composition = composition,\n    iterations = 3 // Play the animation 3 times\n)\n```\n\n## Observing Animation State\n\nYou can observe animation state changes:\n\n\n```Kotlin\nLaunchedEffect(\n    key1 = animationState.isPlaying\n) {\n    if (animationState.isPlaying) {\n        println(\"Animation Playing\")\n    }\n    if (animationState.isCompleted) {\n        println(\"Animation Completed\")\n        playing = false\n    }\n}\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismai117%2Fkottie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismai117%2Fkottie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismai117%2Fkottie/lists"}