Convert Figma logo to code with AI

HarshilShah logoDeckTransition

A library to recreate the iOS Apple Music now playing transition

2,189
168
2,189
23
View on GitHub

Top Related Projects

material-motion's avatar

material-motion-swift

1,420

A toolkit for building responsive motion using Core Animation.

HeroTransitions's avatar

Hero

22,021

Elegant transition library for iOS & tvOS

marcosgriselli's avatar

ViewAnimator

7,272

ViewAnimator brings your UI to life with just one line

Ramotion's avatar

animated-tab-bar

11,123

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Ramotion's avatar

folding-cell

10,225

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

Yalantis's avatar

Side-Menu.iOS

2,717

Animated side menu with customizable UI

Quick Overview

DeckTransition is an iOS library that provides a custom UIViewController transition mimicking the behavior of Apple Music's now playing card. It offers a smooth and interactive transition between view controllers, allowing users to dismiss a presented view controller by dragging it down.

Pros

  • Replicates the popular and intuitive Apple Music card transition
  • Highly customizable with various configuration options
  • Smooth and interactive user experience
  • Easy to integrate into existing iOS projects

Cons

  • Limited to iOS platform only
  • May require additional work to adapt to different UI designs
  • Potential performance impact on older devices
  • Requires iOS 11.0 or later

Code Examples

  1. Basic usage:
import DeckTransition

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        modalPresentationStyle = .custom
        transitioningDelegate = DeckTransitioningDelegate()
    }
}
  1. Customizing the transition:
let transitionDelegate = DeckTransitioningDelegate()
transitionDelegate.backgroundColor = .black
transitionDelegate.cornerRadius = 8
transitionDelegate.presentDuration = 0.5
transitionDelegate.dismissDuration = 0.3
viewController.transitioningDelegate = transitionDelegate
  1. Implementing the DeckTransitionViewControllerProtocol:
class DetailViewController: UIViewController, DeckTransitionViewControllerProtocol {
    var isDismissEnabled: Bool = true
    var pullDismissThreshold: CGFloat = 0.1
    var shouldDismissInteractively: Bool = true
}

Getting Started

  1. Install DeckTransition using CocoaPods by adding the following to your Podfile:

    pod 'DeckTransition'

  2. Import the library in your view controller:

    import DeckTransition

  3. Set up the transition for your view controller:

    class YourViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        modalPresentationStyle = .custom
        transitioningDelegate = DeckTransitioningDelegate()
    }
}

  4. Present your view controller:

    let viewController = YourViewController()
present(viewController, animated: true, completion: nil)

Competitor Comparisons

material-motion logo

material-motion-swift

1,420

A toolkit for building responsive motion using Core Animation.

Pros of material-motion-swift

  • More comprehensive animation framework with a wider range of motion capabilities
  • Supports complex, multi-step animations and transitions
  • Provides a declarative API for defining motion

Cons of material-motion-swift

  • Steeper learning curve due to its more complex architecture
  • May be overkill for simple transition effects
  • Less focused on specific card-deck style transitions

Code Comparison

DeckTransition:

let transition = DeckTransition()
viewController.transitioningDelegate = transition
present(viewController, animated: true)

material-motion-swift:

let transaction = Transaction()
transaction.add(
    Plan<SpringTo>().onCompletion { context in
        context.transition(to: .end)
    },
    to: view.layer
)
scheduler.commit(transaction)

Both libraries offer ways to create custom transitions, but material-motion-swift provides a more flexible and powerful API for complex animations, while DeckTransition focuses on a specific card-deck transition effect with a simpler implementation.

HeroTransitions logo

Hero

22,021

Elegant transition library for iOS & tvOS

Pros of Hero

  • More comprehensive and feature-rich library for view controller transitions
  • Supports a wider range of animation types and customizations
  • Active development and larger community support

Cons of Hero

  • Steeper learning curve due to more complex API
  • Potentially higher overhead for simple transitions
  • May require more setup and configuration

Code Comparison

DeckTransition:

let transitionDelegate = DeckTransitioningDelegate()
viewController.transitioningDelegate = transitionDelegate
viewController.modalPresentationStyle = .custom
present(viewController, animated: true, completion: nil)

Hero:

Hero.shared.containerColor = .black
viewController.hero.isEnabled = true
viewController.hero.modalAnimationType = .fade
present(viewController, animated: true, completion: nil)

Both libraries aim to simplify view controller transitions in iOS apps, but Hero offers more flexibility and features at the cost of increased complexity. DeckTransition focuses specifically on card-like modal presentations, making it easier to implement this particular style but limiting its versatility compared to Hero. The code comparison shows that Hero requires enabling the transition for each view controller, while DeckTransition uses a delegate approach. Ultimately, the choice between the two depends on the specific needs of the project and the desired level of customization for transitions.

marcosgriselli logo

ViewAnimator

7,272

ViewAnimator brings your UI to life with just one line

Pros of ViewAnimator

  • More versatile, supporting animations for multiple views simultaneously
  • Offers a wider range of animation types and customization options
  • Easier to implement complex animations with less code

Cons of ViewAnimator

  • May have a steeper learning curve due to more options and flexibility
  • Potentially higher performance overhead for complex animations
  • Less specialized for specific transition types (like card deck transitions)

Code Comparison

ViewAnimator:

let views = [view1, view2, view3]
ViewAnimator.animate(views: views, animations: [AnimationType.from(direction: .bottom, offset: 30)])

DeckTransition:

let transition = DeckTransition()
viewController.modalPresentationStyle = .custom
viewController.transitioningDelegate = transition
present(viewController, animated: true, completion: nil)

ViewAnimator provides a more concise way to animate multiple views with various effects, while DeckTransition focuses specifically on presenting view controllers with a card-like animation. ViewAnimator offers more flexibility for general-purpose animations, whereas DeckTransition excels in its specific use case of card deck-style transitions between view controllers.

Ramotion logo

animated-tab-bar

11,123

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Pros of animated-tab-bar

  • Offers a wide variety of pre-built animations for tab bar items
  • Supports both Swift and Objective-C
  • Provides easy customization options for colors, icons, and animation types

Cons of animated-tab-bar

  • Focuses solely on tab bar animations, limiting its use to specific UI elements
  • May require more setup and configuration compared to DeckTransition
  • Could potentially impact performance if overused or implemented incorrectly

Code Comparison

DeckTransition:

let transition = DeckTransition()
viewController.modalPresentationStyle = .custom
viewController.transitioningDelegate = transition
present(viewController, animated: true, completion: nil)

animated-tab-bar:

let tabBarController = RAMAnimatedTabBarController()
let item1 = RAMAnimatedTabBarItem(title: "Home", image: UIImage(named: "home"), tag: 1)
item1.animation = RAMBounceAnimation()
tabBarController.viewControllers = [item1]

Both libraries offer unique functionality for iOS app transitions and animations. DeckTransition provides a specific card-like presentation style, while animated-tab-bar focuses on enhancing tab bar interactions with various animation options. The choice between the two depends on the specific UI requirements of your app and the desired user experience.

Ramotion logo

folding-cell

10,225

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

Pros of folding-cell

  • More visually appealing and interactive animation
  • Supports both Swift and Objective-C
  • Customizable folding animation with multiple options

Cons of folding-cell

  • More complex implementation and setup
  • Limited to specific use cases (expanding cells)
  • Potentially higher performance overhead due to complex animations

Code Comparison

folding-cell:

let cell = FoldingCell()
cell.itemCount = 4
cell.backViewColor = .blue
cell.foregroundView = customView
cell.setup(frame: frame)

DeckTransition:

let transition = DeckTransition()
viewController.modalPresentationStyle = .custom
viewController.transitioningDelegate = transition
present(viewController, animated: true, completion: nil)

folding-cell offers a more specialized animation for expanding table view cells, while DeckTransition provides a simpler, more general-purpose transition between view controllers. folding-cell requires more setup and customization, whereas DeckTransition can be implemented with minimal code. The choice between the two depends on the specific requirements of your project and the desired visual effect.

Yalantis logo

Side-Menu.iOS

2,717

Animated side menu with customizable UI

Pros of Side-Menu.iOS

  • Offers a customizable side menu with smooth animations
  • Provides a complete solution for implementing a side menu in iOS apps
  • Includes additional features like gesture recognition for menu interaction

Cons of Side-Menu.iOS

  • More complex implementation compared to DeckTransition
  • May require more setup and configuration
  • Limited to side menu functionality, while DeckTransition offers a more versatile card-like transition

Code Comparison

Side-Menu.iOS:

let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: YourViewController)
SideMenuManager.default.leftMenuNavigationController = menuLeftNavigationController
SideMenuManager.default.addPanGestureToPresent(toView: self.navigationController!.navigationBar)
SideMenuManager.default.addScreenEdgePanGesturesToPresent(toView: self.navigationController!.view)

DeckTransition:

let controller = PresentedViewController()
controller.modalPresentationStyle = .custom
controller.transitioningDelegate = deckTransitioningDelegate
present(controller, animated: true, completion: nil)

The Side-Menu.iOS code snippet shows the setup for a side menu with navigation controller and gesture recognition, while the DeckTransition code demonstrates a simpler implementation for presenting a view controller with a custom transition.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

DeckTransition

CI Status Version Package Managers Documentation License Contact

DeckTransition is an attempt to recreate the card-like transition found in the iOS 10 Apple Music and iMessage apps.

Hereʼs a GIF showing it in action.

Demo

Requirements

  • Swift 5.0
  • iOS 9 or later

Installation

CocoaPods

To install DeckTransition using CocoaPods, add the following line to your Podfile:

pod 'DeckTransition', '~> 2.0'

Carthage

To install DeckTransition using Carthage, add the following line to your Cartfile:

github "HarshilShah/DeckTransition" ~> 2.0

Documentation

You can find the docs here. Documentation is generated with Jazzy, and hosted on GitHub Pages.

Usage

Basics

Set modalPresentationCapturesStatusBarAppearance to true in your modal view controller, and override the preferredStatusBarStyle variable to return .lightContent.

Additionally, the UIScrollView instances which should be tracked for the swipe-to-dismiss gesture should have their backgroundColor set to .clear.

Presentation

The transition can be called from code or using a storyboard.

To use via storyboards, just setup a custom segue (kind set to custom), and set the class to DeckSegue.

Hereʼs a snippet showing usage via code. Just replace ModalViewController() with your view controller's class and youʼre good to go.

let modal = ModalViewController()
let transitionDelegate = DeckTransitioningDelegate()
modal.transitioningDelegate = transitionDelegate
modal.modalPresentationStyle = .custom
present(modal, animated: true, completion: nil)

Dismissal

By default, DeckTransition has a swipe-to-dismiss gesture which is automatically enabled when your modalʼs main UIScrollView is scrolled to the top.

You can opt-out of this behaviour by passing in false for the isSwipeToDismissEnabled parameter while initialising your DeckTransitioningDelegate.

UIScrollView detection

DeckTransition has an internal heuristic to determine which UIScrollView should be tracked for the swipe-to-dismiss gesture. In general, this should be sufficient for and cover most use cases.

However there are some edge cases, and should you run into one, these can we worked around by making your modal view controller conform to the DeckTransitionViewControllerProtocol protocol. More information about this can be found in the documentation page about UIScrollView detection.

Snapshots

For a variety of reasons, and especially because of iOS 11's safe area layout, DeckTransition uses a snapshot of your presenting view controller's view instead of using the view directly. This view is automatically updated whenever the frame is resized.

However, there can be some cases where you might want to update the snapshot view by yourself, and this can be achieved using the following one line snippet:

(presentationController as? DeckSnapshotUpdater)?.requestPresentedViewSnapshotUpdate()

All this does is request the presentation controller to update the snapshot.

You can also choose to update snapshot directly from the presenting view controller, as follows:

(presentedViewController?.presentationController as? DeckSnapshotUpdater)?.requestPresentedViewSnapshotUpdate()

It's worth noting that updating the snapshot is an expensive process and should only be used if necessary, for example if you are updating your entire app's theme.

Apps Using DeckTransition

Feel free to submit a PR if you’re using this library in your apps

Author

Written by Harshil Shah

License

DeckTransition is available under the MIT license. See the LICENSE file for more info.