https://github.com/mejdi14/card-switcher
JetPack Compose animation for switching cards
https://github.com/mejdi14/card-switcher
android animation card jetpack-compose position tweenanimation
Last synced: 3 months ago
JSON representation
JetPack Compose animation for switching cards
- Host: GitHub
- URL: https://github.com/mejdi14/card-switcher
- Owner: mejdi14
- Created: 2023-04-12T23:20:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-27T14:48:20.000Z (over 2 years ago)
- Last Synced: 2025-04-01T07:53:08.504Z (7 months ago)
- Topics: android, animation, card, jetpack-compose, position, tweenanimation
- Language: Kotlin
- Homepage:
- Size: 729 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Welcome to Card Switcher Library 👋
## ✨ Demo
## :art:Design inspiration
many thanks goes to [Kim Baschet](https://twitter.com/Kim_____B) for the beautiful design and animation
## Installation
Add this in your root `build.gradle` file (**not** your module `build.gradle` file):
```gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
```
## :hammer:Dependency
Add this to your module's `build.gradle` file (make sure the version matches the JitPack badge above):
```gradle
dependencies {
...
implementation 'com.github.mejdi14:Card-Switcher:1.0.1'
}
```
## :fire:How to use
``` java
SwitchedCard(SwitchedCardsData(
cardModifier = Modifier.size(200.dp, 350.dp),
triggerOnClick = false,
listener = animationListener,
topCardContent = { triggerAnimation ->
CardContent(
imageResId = R.drawable.dog,
text = "Main Card",
onClick = triggerAnimation
)
},
bottomCardContent = { triggerAnimation ->
CardContent(
imageResId = R.drawable.dog,
text = "Details Card",
onClick = triggerAnimation
)
}
))
```
Animation Listener
-----
``` java
val animationListener = object : SwitchedCardAnimationListener {
override fun onAnimationStart() {
// Animation started
}
override fun onAnimationEnd() {
// Animation finished
}
}
```
Animation duration
-----
``` java
.animationDuration
```
Hold animation duration after separation
-----
``` java
.timeBetweenAnimations
```
swipe option
-----
``` java
.enableSwipe
.swipeSensibility
```
trigger the animation start with a swipe gesture
animation direction
-----
``` java
.animationDirection
```
the default behaviour is that the top card goes right and the bottom card goes left when they separate, you can reverse that
Default click behaviour to trigger animation
-----
``` java
.triggerOnClick
```
setting this value true will make the animation start when clicking on one of the cards
it's set to false by default so that you can start the animation from another composable using 'triggerAnimation' like in the example
## 🤝 Contributing
Contributions, issues and feature requests are welcome.
Feel free to check [issues page] if you want to contribute.
## Author
👤 **Mejdi Hafiane**
- profile: [@MejdiHafiane](https://twitter.com/mejdi141)
## Show your support
Please ⭐️ this repository if this project helped you!
## 📝 License
Copyright © 2019 [Mejdi Hafiane](https://github.com/mejdi14).
This project is [MIT](https://github.com/mejdi14/readme-md-generator/blob/master/LICENSE) licensed.