https://github.com/dscyrescotti/shuffleit
A UI library for SwiftUI custom stack views with a wide range of elegant and unique shuffling, sliding and swiping behaviors.
https://github.com/dscyrescotti/shuffleit
animation appleos custom-component custom-view gesture ios macos shuffle-animation slide-animation stackview swift swift-package-manager swiftui swipe-animation swipe-gestures tvos user-interface user-interface-design watchos
Last synced: 7 months ago
JSON representation
A UI library for SwiftUI custom stack views with a wide range of elegant and unique shuffling, sliding and swiping behaviors.
- Host: GitHub
- URL: https://github.com/dscyrescotti/shuffleit
- Owner: dscyrescotti
- License: mit
- Created: 2022-08-30T15:42:32.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-12T12:29:06.000Z (about 2 years ago)
- Last Synced: 2025-02-27T01:52:40.726Z (8 months ago)
- Topics: animation, appleos, custom-component, custom-view, gesture, ios, macos, shuffle-animation, slide-animation, stackview, swift, swift-package-manager, swiftui, swipe-animation, swipe-gestures, tvos, user-interface, user-interface-design, watchos
- Language: Swift
- Homepage: https://dscyrescotti.github.io/ShuffleIt/documentation/shuffleit/
- Size: 109 MB
- Stars: 172
- Watchers: 3
- Forks: 15
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**ShuffleIt** is a user interface library for **SwiftUI** which delivers a collection of customizable stack views with a wide range of elegant shuffling, sliding and swiping behaviours.
CarouselStack
ShuffleDeck
ShuffleStack
## 💡 Features
- [CarouselStack](#carouselstack)
- [ShuffleDeck](#shuffledeck)
- [ShuffleStack](#shufflestack)
### CarouselStack
**CarouselStack** is a stack view with sliding behaviour on the stack of content views with carousel effect. Just like **ShuffleStack**, it doesn't render all content views but it renders at most five content views which is enough to display content views with sliding animation. Besides, it provides customizablae modifiers to modify the view's appearance so that it is easy to adjust to what is desired.
#### Usage
```swift
let colors: [Color] = [.blue, .brown, .black, .cyan, .green, .indigo, .pink, .purple, .red, .orange, .yellow]
var body: some View {
CarouselStack(
colors,
initialIndex: 0
) { color in
color
.frame(height: 200)
.cornerRadius(16)
}
}
```
Preview
To explore more about **CarouselStack**, check out the [documentation](https://dscyrescotti.github.io/ShuffleIt/documentation/shuffleit/carouselstack/).
### ShuffleDeck
**ShuffleDeck** is a stack view with shuffling behaviour on the stack of content views which mimics the behaviour of photo collections in Apple's Messages App. As it is based on the reusability of content views, it only renders views that are visible on the screen and switches data of content views based on the current index. As it comes with a bunch of modifiers, it fully supports to tailor the view to meet the wanted appearance.
#### Usage
```swift
let colors: [Color] = [.blue, .brown, .black, .cyan, .green, .indigo, .pink, .purple, .red, .orange, .yellow]
var body: some View {
ShuffleDeck(
colors,
initialIndex: 0
) { color in
color
.frame(width: 200, height: 300)
.cornerRadius(16)
}
}
```
Preview
To explore more about **ShuffleDeck**, check out the [documentation](https://dscyrescotti.github.io/ShuffleIt/documentation/shuffleit/shuffledeck/).
### ShuffleStack
**ShuffleStack** is a stack view with shuffling behaviour on the stack of content views which will be useful as a banner. Not like normal stack view, it only renders three content views visible on the screen and switches data of content views based on the current index. As it comes with a bunch of modifiers, it is highly customizable to get the desired appearance.
#### Usage
```swift
let colors: [Color] = [.blue, .brown, .black, .cyan, .green, .indigo, .pink, .purple, .red, .orange, .yellow]
var body: some View {
ShuffleStack(
colors,
initialIndex: 0
) { color in
color
.frame(height: 200)
.cornerRadius(16)
}
}
```
Preview
To explore more about **ShuffleStack**, check out the [documentation](https://dscyrescotti.github.io/ShuffleIt/documentation/shuffleit/shufflestack/).
> Starting from Version 2.0.0, there are some changes which rename some modifiers and some types of ShuffleStack. Please check out [documentation](https://dscyrescotti.github.io/ShuffleIt/documentation/shuffleit/shufflestack/) to update your code accordingly.
## ⚠️ Requirements
- iOS 15+, macOS 12+, watchOS 8+, tvOS 15+
> ShuffleIt is developed using Xcode 13.3.1. Make sure you are using Xcode 13.3.1 and above.
## 🛠 Installation
### 📦 Using Swift Package Manager
Add it as a dependency within your Package.swift.
```
dependencies: [
.package(url: "https://github.com/dscyrescotti/ShuffleIt.git", from: "2.1.3")
]
```
## 🔎 Exploration
### Documentation
**ShuffleIt** provides a clear documentation to increase the familiarity with the API and shallow learning curve when using it. You can check it out via this [link](https://dscyrescotti.github.io/ShuffleIt/documentation/shuffleit/).
### Demo Project
**ShuffleIt** also comes with the demo project which is an optimal spot to explore the API usage for available stack views. To run the demo project, you can use the following commands in your terminal.
```
> git clone https://github.com/dscyrescotti/ShuffleIt.git
> cd ShuffleIt && xed Demo
```
Afterwards, Xcode will open the project and then you can hit ⌘+R to run the project.
## 🎉 Motivation
As I'm kinda like an artistic guy, I really indulge in crafting something innovative, in particular, in area of implementing user interface elements. It's a huge pleasure for me to explore the API and create an elegant components and then it has attached to me as my precious hobby. That's why, I used to craft various components to test out what I can achieve so far. Recently, I got the idea of gathering my creations in one place and delivering them to the world so that it can be easily used in other projects and also used as a learning resource for other developers. With this intention, I eventually published my first UI library called **ShuffleIt** for SwiftUI.
## ✍️ Author
Scotti | [@dscyrescotti](https://twitter.com/dscyrescotti)
## 👨💻 Contributions
**ShuffleIt** welcomes all developers to contribute if you have any idea to enhance and open an issue if you encounter any bug.
## © License
**ShuffleIt** is available under the MIT license. See the [LICENSE](https://github.com/dscyrescotti/ShuffleIt/blob/main/LICENSE) file for more info.