{"id":15040906,"url":"https://github.com/wajahatkarim3/flippable","last_synced_at":"2025-04-05T00:08:09.260Z","repository":{"id":51536006,"uuid":"458857316","full_name":"wajahatkarim3/Flippable","owner":"wajahatkarim3","description":"A Jetpack Compose library for animating a flip transition between the front and back of something, such as a card. ","archived":false,"fork":false,"pushed_at":"2024-01-27T10:08:31.000Z","size":5404,"stargazers_count":494,"open_issues_count":7,"forks_count":34,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-05T00:08:03.918Z","etag":null,"topics":["android","android-development","android-library","android-ui","android-ui-widgets","flip-animation","flipper","flipview","jetpack-android","jetpack-compose","kotlin","kotlin-android","kotlin-coroutines","kotlin-library","library"],"latest_commit_sha":null,"homepage":"https://wajahatkarim3.github.io/Flippable","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/wajahatkarim3.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-02-13T15:59:31.000Z","updated_at":"2025-03-28T01:16:29.000Z","dependencies_parsed_at":"2024-10-30T08:24:41.375Z","dependency_job_id":null,"html_url":"https://github.com/wajahatkarim3/Flippable","commit_stats":{"total_commits":30,"total_committers":4,"mean_commits":7.5,"dds":0.1333333333333333,"last_synced_commit":"fc28f9b4e1428e06f5abd86bd5e7bc10b32c19a2"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wajahatkarim3%2FFlippable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wajahatkarim3%2FFlippable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wajahatkarim3%2FFlippable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wajahatkarim3%2FFlippable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wajahatkarim3","download_url":"https://codeload.github.com/wajahatkarim3/Flippable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266564,"owners_count":20910836,"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","android-development","android-library","android-ui","android-ui-widgets","flip-animation","flipper","flipview","jetpack-android","jetpack-compose","kotlin","kotlin-android","kotlin-coroutines","kotlin-library","library"],"created_at":"2024-09-24T20:45:16.149Z","updated_at":"2025-04-05T00:08:09.234Z","avatar_url":"https://github.com/wajahatkarim3.png","language":"Kotlin","funding_links":["https://www.paypal.me/WajahatKarim/5"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/8867121/154110583-1e5364de-3106-47c7-9b94-bf8b1e9d6ff3.gif\"/\u003e\u003c/div\u003e\n\u003ch1 align=\"center\"\u003e💳 Flippable\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003eA Jetpack Compose utility library to create flipping Composable views with 2 sides.\u003c/h4\u003e\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fwajahatkarim3%2FEasyFlipViewPager\u0026text=Create%20amazing%20book%20or%20card%20flipping%20animations%20for%20your%20ViewPager%20in%20Android%20with%20these%202-lines%20of%20code%20through%20EasyFlipViewPager\u0026hashtags=android%2C%20kotlin%2C%20java%2C%20opensource%2C%20programming\"\u003e\n        \u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\"/\u003e\n    \u003c/a\u003e \u003ca href=\"https://twitter.com/WajahatKarim\"\u003e\n        \u003cimg src=\"https://img.shields.io/twitter/follow/WajahatKarim?style=social\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e \n\u003cbr/\u003e\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/maven-central/v/com.wajahatkarim/flippable\" /\u003e\n    \u003c!-- PRs Welcome --\u003e\n    \u003ca href=\"\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"/\u003e\n    \u003c/a\u003e\n    \u003c!-- Say Thanks! --\u003e\n    \u003ca href=\"https://saythanks.io/to/wajahatkarim3\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.paypal.me/WajahatKarim/5\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026amp;style=flat\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤︎ by\n  \u003ca href=\"https://twitter.com/WajahatKarim\"\u003eWajahat Karim\u003c/a\u003e and\n  \u003ca href=\"https://github.com/wajahatkarim3/Flippable/graphs/contributors\"\u003e\n    contributors\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Demo\nhttps://user-images.githubusercontent.com/8867121/154115910-8e2d2661-97c0-4b5a-b27e-76857533afe6.mp4\n              \n\u003cbr/\u003e\n\u003cbr/\u003e\n        \n## 💻 Installation\nIn `build.gradle` of `app` module, include this dependency\n        \n```groovy\nimplementation \"com.wajahatkarim:flippable:x.y.z\"\n```\n        \nPlease replace x, y and z with the latest version numbers ![](https://img.shields.io/maven-central/v/com.wajahatkarim/flippable).\n        \nOr you can find latest version and changelogs in the [releases](https://github.com/wajahatkarim3/Flippable/releases).\n\n\u003cbr/\u003e\n        \n## ❓ Usage\n\nAdd the [`Flippable`](https://github.com/wajahatkarim3/Flippable/blob/main/flippable/src/main/java/com/wajahatkarim/flippable/Flippable.kt) composable and define the front and back side composable methods inside. That's it.\n\n```kotlin\nFlippable(\n    frontSide = {\n        // Composable content for the front side\n    },\n\n    backSide = {\n        // Composable content for the back side\n    },\n\n    flipController = rememberFlipController(),\n\n    // Other optional parameters\n)\n```\n\nThe `FlippableController` allows you to programatically flip the view from any event or button click or any method call etc. There's a method `rememberFlipController()` to get an instance of `FlippableController`. If you want to use any key for the `remember`, you can do so by directly creating `FlippableController` yourself like the code below:\n\n```kotlin\nval flipController = remember { FlippableController() }\n\nval flipController1 = remember(key = \"2\") { FlippableController() }\n```\n\n\u003cbr/\u003e\n    \n## 🎨 Customization Parameters\nIf you'd like to discover what `Flippable` offers, here is an exhaustive description of customizable parameters.\n    \n```kotlin\n    \nval controller = rememberFlipController()\n    \nFlippable(\n    frontSide = {\n        // Composable content for the front side\n    },\n    \n    backSide = {\n        // Composable content for the back side\n    },\n    \n    // To manually controll the flipping, you would need an instance of FlippableController. \n    // You can access it using rememberFlipController() method.\n    // This provides methods like controller.flip(), controller.flipToFront(), controller.flipToBack() etc.\n    flipController = controller,\n    \n    // The obvious one - if you have done Jetpack Compose before.\n    modifier = Modifier,\n    \n    // The duration it takes for the flip transition in Milliseconds. Default is 400\n    flipDurationMs = 400,\n    \n    // If true, this will flip the view when touched. \n    // If you want to programatically flip the view without touching, use FlippableController.\n    flipOnTouch = flipOnTouchEnabled,\n    \n    // If false, flipping will be disabled completely. \n    // The flipping will not be triggered with either touch or with controller methods.\n    flipEnabled = flipEnabled,\n    \n    // The Flippable is contained in a Box, so this tells\n    // the alignment to organize both Front and Back side composable.\n    contentAlignment = Alignment.TopCenter,\n    \n    //If true, the Flippable will automatically flip back after \n    //duration defined in autoFlipDurationMs. By default, this is false..\n    autoFlip = false,\n    \n    //The duration in Milliseconds after which auto-flip back animation will start. Default is 1 second.\n    autoFlipDurationMs = 1000,\n    \n    // The animation type of flipping effect. Currently there are 4 animations. \n    // Horizontal Clockwise and Anti-Clockwise, Vertical Clockwise and Anti-Clockwise\n    // See animation types section below.\n    flipAnimationType = FlipAnimationType.HORIZONTAL_CLOCKWISE,\n    \n    // The [GraphicsLayerScope.cameraDistance] for the flip animation. \n    // Sets the distance along the Z axis (orthogonal to the X/Y plane\n    // on which layers are drawn) from the camera to this layer.\n    cameraDistance = 30.0F,\n    \n    // The listener which is triggered when flipping animation is finished.\n    onFlippedListener = { currentSide -\u003e\n        // This is called when any flip animation is finished. \n        // This gives the current side which is visible now in Flippable.\n    }\n)\n```\n\nI encourage you to play around with the [sample app](https://github.com/wajahatkarim3/Flippable/blob/main/app/src/main/java/com/wajahatkarim/flippable_demo/MainActivity.kt) to get a better look and feel. It showcases advanced usage with customized parameters.\n        \n\u003cbr/\u003e\n        \n## 📄 API Documentation\nVisit the [API documentation](https://wajahatkarim3.github.io/Flippable) of this library to get more information in detail.\n\n\u003cbr/\u003e\n        \n## ⚙️ Animation Types\n\n### Horizontal Clockwise\n![Kapture 2022-02-15 at 23 20 11](https://user-images.githubusercontent.com/8867121/154124561-2f6d6d2d-1f7a-4d85-92cd-c91f54b6f245.gif)\n\n### Horizontal Anti-Clockwise\n![Kapture 2022-02-15 at 23 24 05](https://user-images.githubusercontent.com/8867121/154125061-f40fed57-d1d3-42ee-94cf-f0597ce12fee.gif)\n\n### Vertical Clockwise\n![Kapture 2022-02-15 at 23 26 00](https://user-images.githubusercontent.com/8867121/154125376-496d2577-1c65-49bf-a1e1-0ba0aefcd0b0.gif)\n\n\n### Vertical Anti-Clockwise\n![Kapture 2022-02-15 at 23 26 33](https://user-images.githubusercontent.com/8867121/154125464-f89f3196-466a-4be9-9874-cf78ba4729ac.gif)\n        \n\u003cbr/\u003e\n        \n## 👨 Developed By\n\n\u003ca href=\"https://twitter.com/WajahatKarim\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://avatars1.githubusercontent.com/u/8867121?s=460\u0026v=4\" width=\"70\" align=\"left\"\u003e\n\u003c/a\u003e\n\n**Wajahat Karim**\n\n[![Twitter](https://img.shields.io/badge/-twitter-grey?logo=twitter)](https://twitter.com/WajahatKarim)\n[![Web](https://img.shields.io/badge/-web-grey?logo=appveyor)](https://wajahatkarim.com/)\n[![Medium](https://img.shields.io/badge/-medium-grey?logo=medium)](https://medium.com/@wajahatkarim3)\n[![Linkedin](https://img.shields.io/badge/-linkedin-grey?logo=linkedin)](https://www.linkedin.com/in/wajahatkarim/)\n\n\u003cbr/\u003e\n\n## 👍 How to Contribute\n1. Fork it\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -am 'Add some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create new Pull Request\n\n\u003cbr/\u003e\n        \n## 📃 License\n\n    Copyright 2022 Wajahat Karim\n\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwajahatkarim3%2Fflippable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwajahatkarim3%2Fflippable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwajahatkarim3%2Fflippable/lists"}