All Projects → HarshilShah → Decktransition

HarshilShah / Decktransition

Licence: mit
A library to recreate the iOS Apple Music now playing transition

Programming Languages

swift
15916 projects
ruby
36898 projects - #4 most used programming language

Projects that are alternatives of or similar to Decktransition

React Number Easing
React component for fancy number transitions.
Stars: ✭ 131 (-94.06%)
Mutual labels:  transition
Yii2 Workflow
A simple workflow engine for Yii2
Stars: ✭ 157 (-92.89%)
Mutual labels:  transition
React Reveal Text
✨ A small react library for animating the revealing of text.
Stars: ✭ 171 (-92.25%)
Mutual labels:  transition
Transitionhelper
This is a simple util to create Activity transition animation
Stars: ✭ 1,653 (-25.1%)
Mutual labels:  transition
Layerjs
layerJS: Javascript UI composition framework
Stars: ✭ 1,825 (-17.31%)
Mutual labels:  transition
Starwars.android
This component implements transition animation to crumble view into tiny pieces.
Stars: ✭ 1,942 (-12.01%)
Mutual labels:  transition
Googlenewsstandanimation Android
Navigation pattern like in Google News Stand app with transitions
Stars: ✭ 130 (-94.11%)
Mutual labels:  transition
Izimodal
Elegant, responsive, flexible and lightweight modal plugin with jQuery.
Stars: ✭ 2,122 (-3.85%)
Mutual labels:  modals
Kwdrawercontroller
Drawer view controller that easy to use!
Stars: ✭ 154 (-93.02%)
Mutual labels:  transition
Featherlight
Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total.
Stars: ✭ 2,037 (-7.7%)
Mutual labels:  modals
Gganimate
A Grammar of Animated Graphics
Stars: ✭ 1,744 (-20.98%)
Mutual labels:  transition
Cpcollectionviewkit
Interesting UICollectionView layouts and transitions
Stars: ✭ 140 (-93.66%)
Mutual labels:  transition
Materialtransitionanimation
Material Animations practice which is inspired from
Stars: ✭ 165 (-92.52%)
Mutual labels:  transition
Css Animation 101 Cn
学习如何为你的 Web 程序添加动效
Stars: ✭ 132 (-94.02%)
Mutual labels:  transition
Transitioner
A library for dynamic view-to-view transitions
Stars: ✭ 2,049 (-7.16%)
Mutual labels:  transition
Aicustomviewcontrollertransition
Easy and tidy way for creating custom UIViewController transitions for iOS
Stars: ✭ 130 (-94.11%)
Mutual labels:  transition
Aisphereview
A wonderful 3D animation
Stars: ✭ 160 (-92.75%)
Mutual labels:  transition
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (-91.57%)
Mutual labels:  transition
Cssanimation.io
CSS Animation Library for Developers and Ninjas
Stars: ✭ 176 (-92.03%)
Mutual labels:  transition
Phaser State Transition
State transition plugin for Phaser.js
Stars: ✭ 169 (-92.34%)
Mutual labels:  transition

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].