TinderSwipingAnimation is an easy to use library written using SwiftUI to simplify the implementation of the tinder swipe animation.
- File > Swift Packages > Add Package Dependency
- Add
https://github.com/omarthamri/TinderSwipingAnimation.git
- Select "Up to Next Major" with "1.9.2"
target 'MyApp' do
pod 'MyTinderSwipingAnimation', '~> 1.9'
end
The import statement in this case will be
import MyTinderSwipingAnimation
Xcode 15 made a significant change by setting the default value of the ENABLE_USER_SCRIPT_SANDBOXING Build Setting from NO to YES.
As a result, when installing TinderSwipingAnimation with cocoapods we encounters an error related to missing file permissions, which typically manifests as follows: error: Sandbox: rsync.samba(10816) deny(1) file-read-data.
To resolve this issue, it is necessary to manually set the ENABLE_USER_SCRIPT_SANDBOXING setting to NO
in Build Settings.
in the top of your view file add the code below:
import TinderSwipingAnimation
A basic implementation example would be like this:
struct ContentView: View {
let cards: [CardModel] = [ // This is the data to be shown in Card
CardModel(name: "Brie", imageName: "brie", age: "34"),
CardModel(name: "Scarlett", imageName: "scarlett", age: "38"),
CardModel(name: "Elizabeth", imageName: "elizabeth", age: "33")
]
let buttons: [ButtonModel] = [ // those are the buttons to be shown in the card
ButtonModel(image: Image(systemName: "xmark"), color: .pink),
ButtonModel(image: Image(systemName: "heart.fill"), color: .red),
ButtonModel(image: Image(systemName: "bubble.fill"), color: .purple),
ButtonModel(image: Image(systemName: "bolt.fill"), color: .blue)
]
var body: some View {
TinderSwipingAnimation(cards: cards, buttons: buttons) { (cardModel,direction) in // Closure to be called when a card is swiped.
print("Swiped \(cardModel.name) to \(direction.description)")
}
}
}
To Perform a swipe using buttons you just need to pass the action to do in the ButtonModel initializer.There are the following predefined actions .goLeft
or .goRight
or .goTop
or .goBottom
or .none
. By default buttons are create with .none action.
let buttons: [ButtonModel] = [ // those are the buttons to be shown in the card
ButtonModel(image: Image(systemName: "xmark"), color: .pink,action: .goLeft), // swipe left when button clicked
ButtonModel(image: Image(systemName: "heart.fill"), color: .red,action: .goTop), // swipe top when button clicked
ButtonModel(image: Image(systemName: "bubble.fill"), color: .purple,action: .goBottom), // swipe bottom when button clicked
ButtonModel(image: Image(systemName: "bolt.fill"), color: .blue,action: .goRight) // swipe right when button clicked
]
![](https://private-user-images.githubusercontent.com/39087448/287104193-b32b9ce4-e631-4cca-9df0-bb2bae63b8fd.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTkwMTgsIm5iZiI6MTcyNDYxODcxOCwicGF0aCI6Ii8zOTA4NzQ0OC8yODcxMDQxOTMtYjMyYjljZTQtZTYzMS00Y2NhLTlkZjAtYmIyYmFlNjNiOGZkLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDIwNDUxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI4ZjJmMWI2YjM0YWZiMzhkMjUyNTY0M2MzZWQ5ZjBjNWVkNjc2MmEzZDBhYThiN2FjMmNkNGE0YTA5YTFmNTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0._jxrfNnEi4gD4w32K85pDpcGRz5ugdnDi-q9F_XRAnw)
To return the most recently swiped card to the top of your card stack you just need to pass the action .undo
in the ButtonModel initializer.
ButtonModel(image: Image(systemName: "gobackward"), color: .pink,action: .undo)
![](https://private-user-images.githubusercontent.com/39087448/287369976-ba4e8869-fbc2-49bb-a33f-dbb983b27caf.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTkwMTgsIm5iZiI6MTcyNDYxODcxOCwicGF0aCI6Ii8zOTA4NzQ0OC8yODczNjk5NzYtYmE0ZTg4NjktZmJjMi00OWJiLWEzM2YtZGJiOTgzYjI3Y2FmLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDIwNDUxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQyYzJjZjgzODU2N2NiZGQxZWNjYzhkNWZhMWE2MmViOWYzM2IzM2JiMDg5MmI2ZTNlNTA1ZDYwZmQ3OTRmNDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rlGsUBE8X8doqvLO1J4oTU-3N0WBoMpEHu8_TCXHJ5I)
If you want to modify the colors or fonts in the card
TinderSwipingAnimation(cards: cards, buttons: buttons) { (cardModel,direction) in // Closure to be called when a card is swiped.
print("Swiped \(cardModel.name) to \(direction.description)")
}
.tinderSwipingStyle(titleColor: .red, subtitleColor: .red, titleFont: .largeTitle, subtitleFont: .largeTitle)
If you want to change the orientation of the text inside your card you can use options with .orientation
. we got two orientations options .horizontal
and .vertical
. By default the text orientation inside the card is .vertical
.
You can also use options with .backgroundColor
to change the background color of the card. By default the background color of the card is .white
.
TinderSwipingAnimation(
cards: cards,
buttons: buttons,
onSwipe: { (cardModel,direction) in // Closure to be called when a card is swiped.
print("Swiped \(cardModel.name) to \(direction.description)")
}, options: [
.orientation(.horizontal), // this is setting text orientation inside card to horizontal
.backgroundColor(.yellow) // This setting background color inside card to yellow
])
![](https://private-user-images.githubusercontent.com/39087448/287315663-c40f2319-bd8b-4350-86de-a145dbeb5d9a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2MTkwMTgsIm5iZiI6MTcyNDYxODcxOCwicGF0aCI6Ii8zOTA4NzQ0OC8yODczMTU2NjMtYzQwZjIzMTktYmQ4Yi00MzUwLTg2ZGUtYTE0NWRiZWI1ZDlhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDIwNDUxOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE5ZGYxZWQ0ZTk5MjFjNTNiZGE2OWZmNWJlZjgwZDNlNzQ1YjE4ZWM5OWM0MGNlZTU4YWJmM2JjODg1MGI1OWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.z6jPjKdu4RXeuioHJJowb58yV3b_j2qLJaoWdpeeE58)
- iOS 17.0+
Omar Thamri, @ThamriOmar
TinderSwipingAnimation is released under the MIT license. See LICENSE for details.