How to make your own iOS swipe onboarding animation

Sometimes you have to make your own animations. We’ll take you through how to create a custom animation to help users in the onboarding process.

Marino Insights Cover Image

Animating a UITableViewCell to show the editActions isn't as straightforward as we would think. I couldn't find any public APIs to do this programmatically (If you found them, please let me know). So I created a custom animation, to help users in the onboarding process.

UITableViewCell Demo

How to implement

We'll add the following code in viewDidLayoutSubviews() of the ViewController that has our TableView to ensure all constraints have been applied.

[pre type="swift"]

if !UserDefaults.standard.bool(forKey: TableViewCellOnboarding.userDefaultsFinishedKey) {

    let config = TableViewCellOnboarding.Config(initialDelay: 1, duration: 2.5, halfwayDelay: 0.5)

    onboardingCell = TableViewCellOnboarding(with: tableView, config: config)

    onboardingCell?.editActions = tableView(tableView, editActionsForRowAt: IndexPath(row: 0, section: 0))

}

[/pre]

We'll have to manually set the editActions in TableViewCellOnboarding by using the UITableViewDelegate's tableView(_:editActionsForRowAt:). This is so our TableViewCellOnboarding can use the style of the actual editActions.

And that's all there is to it

Config

To make the animation a bit more easily configurable we can pass in a TableViewCellOnboarding.Config.

To use the default values we can just omit the config parameter.

How to use

We can, of course, call the animation code whenever we like, but we'll need to make sure our TableView has been completely laid out.

Once the animation has finished completely TableViewCellOnboarding.userDefaultsFinishedKey is set to true so we can choose to show the animation only once.

If the user navigates away from the screen before the animation is finished TableViewCellOnboarding.userDefaultsFinishedKe will not be set to true.

Source

The source is available to use here. It comes with a sample project that uses a custom Config.

!@THEqQUICKbBROWNfFXjJMPSvVLAZYDGgkyz&[%r{\"}mosx,4>6]|?'while(putc 3_0-~$.+=9/2^5;)<18*7and:`#

Need a Quote for a Project?

We’re ready to start the conversation however best suits you - on the phone at
+353 (0)1 833 7392 or by email