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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMDkzMjMsIm5iZiI6MTcyNTIwOTAyMywicGF0aCI6Ii8zOTA4NzQ0OC8yODcxMDQxOTMtYjMyYjljZTQtZTYzMS00Y2NhLTlkZjAtYmIyYmFlNjNiOGZkLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDE2NDM0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFjMmVmM2RjM2Q4NGJjN2Y1ZjY0ODIzNGFlZTQ1NTliZDJlMWIwZTk2N2M3YjEwYzk2MDA3ODliYzgzN2IxY2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.nUYXAoK_F04CKcJWy_8Xm4OVEBZMwHCaOLHRxMRJmQc)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMDkzMjMsIm5iZiI6MTcyNTIwOTAyMywicGF0aCI6Ii8zOTA4NzQ0OC8yODczNjk5NzYtYmE0ZTg4NjktZmJjMi00OWJiLWEzM2YtZGJiOTgzYjI3Y2FmLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDE2NDM0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZiNTIxMTU2MzQyODcwNzcxZGZkZjc2OWI2ZDkzMjQ2YmYzNThmOGM3YTc4NWIyNmRjZTkxNGYyODZiYjhlZGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.9e23vlP-r8syuJv_nKe3_gvWGwqmZuLaW2_hDhB79pY)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUyMDkzMjMsIm5iZiI6MTcyNTIwOTAyMywicGF0aCI6Ii8zOTA4NzQ0OC8yODczMTU2NjMtYzQwZjIzMTktYmQ4Yi00MzUwLTg2ZGUtYTE0NWRiZWI1ZDlhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAxVDE2NDM0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAxNzAwOWZjZTRhOWJlMmUyOTExMTAwNDYwMzhkODBmNzU2M2I2Y2E0MGI3M2YyMzQ1NTBmNGNiNGM2N2JkYTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ex5v6HqEQqGFmnu_9FTftK3xPvVdWFZ0vQCrXaDIMRo)
- iOS 17.0+
Omar Thamri, @ThamriOmar
TinderSwipingAnimation is released under the MIT license. See LICENSE for details.