🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

Overview

Jelly-Animators: Elegant Viewcontroller Animations in Swift

current version current version twitter handle Swift 4.2 compatible platform carthage support license

Jelly is a library for animated, non-interactive & interactive viewcontroller
transitions and presentations with the focus on a simple and yet flexible API.

With a few lines of source code, interactive UIViewController transitions
and custom resizable UIViewController presentations can be created,
without the use of the cumbersome UIKit Transitioning API.

var slidePresentation = SlidePresentation(direction: .left)
let animator = Animator(presentation: slidePresentation)
animator.prepare(viewController: viewController)
present(viewController, animated: true, completion: nil)

  1. Create a Presentation Object
  2. Configure an Animator with the Presentation
  3. Call the prepare Function
  4. Use the native UIViewController presentation function.
class ViewController : UIViewController {
    var animator: Jelly.Animator?
    override func viewDidLoad() {
        super.viewDidLoad()
        let viewController = YourViewController()
        let presentation = SlidePresentation(direction: .left)
        animator = Animator(presentation:presentation)
        animator?.prepare(presentedViewController: viewController)
        present(viewController, animated: true, completion: nil)
    }
}

DO NOT FORGET TO KEEP A STRONG 💪 REFERENCE

Because the transitioningDelegate of a UIViewController is weak, you need to hold a strong reference to the Animator inside the UIViewController you are presenting from or the central object that maintains your presentations.

Interactive transitions can be activated for the slide and the cover transitions. If the transitions are to be interactive, only an InteractionConfiguration object has to be passed to the presentation.

Here 3 parameters play an important role. First, the completionThreshold, which determines the percentage of the animation that is automatically completed as soon as the user finishes the interaction. The second parameter is the actual type of interaction. Jelly offers the .edge and the .canvas type. In an .edge transition, the user must execute the gesture from the edge of the screen. When using the .canvas type, gesture recognizers are configured so that direct interaction with the presenting and presented view leads to the transition. The last parameter is called mode. Using the mode you can limit the interaction to presentation or dismiss interaction (default = [.present,.dismiss]).

let viewController = YourViewController()
let interaction = InteractionConfiguration(presentingViewController: self, completionThreshold: 0.5, dragMode: .edge, mode: .dismiss)
let presentation = SlidePresentation(direction: .right, interactionConfiguration: interaction)
let animator = Animator(presentation: presentation)
animator.prepare(presentedViewController: viewController)

Jelly 2.0 also provides a new feature called LIVE UPDATE. Using Jellys new Live Update API it is now possible to update the alignment, size, margin-guards and corner radius when the viewcontroller is already visible.

These are the new live update functions provided by the Animator.

  • updateAlignment(alignment: PresentationAlignment, duration: Duration) - Cover & Fade
  • updateVerticalAlignment(alignment: VerticalAlignment, duration: Duration) - Cover & Fade
  • updateHorizontalAlignment(alignment: HorizontalAlignment, duration: Duration) - Cover & Fade
  • updateSize(presentationSize: PresentationSize, duration: Duration) - Cover & Fade
  • updateWidth(width: Size, duration: Duration) - Cover, Fade and horizontal Slide
  • updateHeight(height: Size, duration: Duration) - Cover, Fade and vertical Slide
  • updateMarginGuards(marginGuards: UIEdgeInsets, duration: Duration) - Cover & Fade
  • updateCorners(radius: CGFloat, corners: CACornerMask, duration: Duration) - Cover & Fade & Slide

Some of them will throw an exception if used on a not supported presentationType.
For example: It is currently not possible to update the size on a Slide-Presentation.

The presentation types can be configured with various settings:

  • size
  • margin guards
  • direction
  • horizontal & vertical alignment
  • dimmed and blurred backgroundStyle
  • duration
  • presentation and dismiss curve
  • spring damping & velocity
  • corner specification & corner radius
  • completion threshold
  • interactive drag mode (edge or pan)
  • interaction mode (present, dismiss)
  • parallax (Just available on slide Presentations)

Each component is explained in more detail in the Jelly Wiki.

Deployment target of your App is >= iOS 11.0

Jelly is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'Jelly', '~> 2.2.2'

Sebastian Boldt, https://www.sebastianboldt.com

I am a mobile software architect and developer specializing in iOS. Passionate about creating awesome user experiences, designing beautiful user interfaces, and writing maintainable, structured, and best-practice orientated code. Continuously trying to improve skills and learn new technologies.

current version

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

Comments
  • Having a few issues upgarding

    Having a few issues upgarding

    Couple issues while upgrading

    When running the exact example in the wiki for customizable options shown below

    let allCorners = [.layerMaxXMaxYCorner,.layerMaxXMinYCorner,.layerMinXMaxYCorner,.layerMinXMinYCorner]
    
    let uiConfiguration = PresentationUIConfiguration(cornerRadius: 10, 
                                                      backgroundStyle: .blurred(effectStyle: .dark),           
                                                      isTapBackgroundToDismissEnabled: true, 
                                                      corners: allCorners )
    
    let size = PresentationSize(width: .fullscreen, height: .fullscreen)
    
    let alignment = PresentationAlignment(vertical: .center, horizontal: .center)
    
    let marginGuards = UIEdgeInsets(top: 40, left: 16, bottom: 40, right: 16)
    
    let timing = PresentationTiming(duration: .normal, presentationCurve: .linear, dismissCurve: .linear)
    
    let interactionConfiguration = InteractionConfiguration(presentingViewController: self, 
                                                            completionThreshold: 0.5, 
                                                            dragMode: .canvas)
    
    let presentation = CoverPresentation(directionShow: .left, 
                                         directionDismiss: .left, 
                                         uiConfiguration: uiConfiguration, 
                                         size: size, 
                                         alignment: alignment, 
                                         marginGuards: marginGuards, 
                                         timing: timing, 
                                         spring: .none, 
                                         interactionConfiguration: interactionConfiguration)
    

    I had to hint to the compiler it was an options set with

    let allCorners: CACornerMask = [.layerMaxXMaxYCorner,.layerMaxXMinYCorner,.layerMinXMaxYCorner,.layerMinXMinYCorner]
    

    I'm also not sure how to migrate old usage to new usage, for example:

    var presentation = JellySlideInPresentation()
    presentation.widthForViewController = .custom(value: 295)
    presentation.heightForViewController = .custom(value: 173)
    

    The new signature of SlidePresentation takes a size of type Size where CoverPresentation takes a size of PresentationSize, so i'm not sure what to do here

    opened by rromanchuk 8
  • Flashing blur effect when swiping up on top of controller

    Flashing blur effect when swiping up on top of controller

    Love the library! Literally makes life so much easier. Currently seeing a flash whenever a user swipes up from the top of the controller inside the animator when using the blur effect. Let me know what info would help, I can attach pics or a video.

    bug 
    opened by glisom 5
  • Centre the content of viewController in the Jelly presentation.

    Centre the content of viewController in the Jelly presentation.

    I have implemented timer design and presenting the timer using Jelly controller.

    The problem is, The view is not coming up in centre.

    How can I centre the content?

    simulator screen shot 11-dec-2016 12 28 31 am

    duplicate 
    opened by Rashesh-Bosamiya 5
  • iOS 13 glitch issue

    iOS 13 glitch issue

    I am presenting my ViewControllers this way by using different PresentationSize and PresentationUIConfiguration. Presenting this way and its creating glitches every where.

    let vc = UIStoryboard(name: "RideSelectionStory", bundle: nil).instantiateInitialViewController() as! RideSelectionVC
    let interactionConfiguration = InteractionConfiguration(presentingViewController: self, completionThreshold: 0.5, dragMode: .edge)
    let uiConfiguration = PresentationUIConfiguration(cornerRadius: 0, backgroundStyle: .dimmed(alpha: 0.92), isTapBackgroundToDismissEnabled: false)
    let size = PresentationSize(width: .fullscreen, height: .custom(value: (self.view.frame.height*0.7)))
    let marginGuards = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    let alignment = PresentationAlignment(vertical: .bottom, horizontal: .left)
    let presentation = CoverPresentation(directionShow: .bottom, directionDismiss: .bottom, uiConfiguration: uiConfiguration, size: size, alignment: alignment, marginGuards: marginGuards, interactionConfiguration: interactionConfiguration)
    let animator = Animator(presentation: presentation)
    self.animator = animator
    animator.prepare(presentedViewController: vc)
    self.present(vc,animated: true)
    

    and it is giving a glitch on iOS 13. What can be the solution for this issue?

    opened by awaisbub 4
  • Edge drag available after dismiss called

    Edge drag available after dismiss called

    I am using following way to present my view controller:

    let navController = UINavigationController(rootViewController: vc)
    
    let interactionConfiguration = InteractionConfiguration(presentingViewController: self, dragMode: .edge)
    let presentation = SlidePresentation(direction: .right, interactionConfiguration: interactionConfiguration)
    
    self.animator = Animator(presentation: presentation)
    self.animator?.prepare(presentedViewController: navController)
    self.present(navController, animated: true)
    

    It is working fine, sliding from right to left and edge drag is working too.

    However after I call self.dismiss(animated: true) in the pushed VC I can still drag the VC back from right edge.

    Is there a way to prevent that?

    enhancement question 
    opened by NirpE 4
  • How to resize the view of the presented controller ?

    How to resize the view of the presented controller ?

    let controllerA = ControllerA()
    let navigationController = UINavigationController(rootViewController: controllerA)
    
    let presentation = JellyFadeInPresentation()
    let animator = JellyAnimator(presentation: presentation)
    animator.prepare(viewController: navigationController)
    
    self.present(navigationController, animated: true, completion: nil)
    

    In controllerA, controllerB will be created and pushed to navigationController. My question is How to resize controllerB's view ? Thanks!

    enhancement 
    opened by kevin-lxh 4
  • Add alpha associated value to BackgroundStyle.dimmed

    Add alpha associated value to BackgroundStyle.dimmed

    Gives more flexibility when using BackgroundStyle.dimmed, allows touchBackgroundToDismiss with a completely transparent background, provides opportunity to remove .none case in a future release.

    opened by JustinM1 4
  • Make Example Project buildable on Xcode 12.5 & Add .gitignore for it

    Make Example Project buildable on Xcode 12.5 & Add .gitignore for it

    This PR makes Example Project buildable on Xcode 12.5 & Add .gitignore for it

    • Upgrade Example project's pods to make it buildable Nimble & Quick & TouchVisualizer are too old to be built.
    • Add .gitignore file for Example projects
    opened by jessehao 3
  • UICollectionView didSelectItemAt not responding?

    UICollectionView didSelectItemAt not responding?

    Hello, I encountered a problem during use. I added UICollectionView to the pop-up view, but it cannot respond to

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath)

    do you have any suggestions?

    thank you very much.

    opened by trusbe 3
  • Request to put back Minimum deployment target to iOS 10

    Request to put back Minimum deployment target to iOS 10

    @SebastianBoldt Thank you for this great library!

    Can you please explain for which reasons other than for using the maskedCorners property of the CALayer is the minimum deployment target set to iOS 11?

    Although iOS 10 is not recent anymore, users are still using it and if you bring back support you will be covering close to 99% of all users.

    All this requires a simple change. One similar provided by this gist

    opened by marcmatta 3
  • Interactive Transitions

    Interactive Transitions

    I'm trying to use the interactive transition to dismiss a view controller when swiping downward. I'm still a little confused to how to get access to the gesture recognizer. Am I suppose to use the new Live Update API in conjunction with the gesture recognizer, or what am I doing wrong?

    opened by Kevinw14 3
  • DirectionDismiss is not working

    DirectionDismiss is not working

    I want it to disappear from the left, not from the bottom

    class BasePresentationController: UIViewController {

    static func presentFromLeftToRight<T: BasePresentationController>(on hostViewController: UIViewController, returnType: T.Type) -> T? {
        let nibName = self.className.replacingOccurrences(of: "ViewController", with: "").replacingOccurrences(of: "Controller", with: "")
        if let presentedVC = UIStoryboard(name: nibName, bundle: nil).instantiateInitialViewController() as? BaseNavigationController {
            guard let vc = presentedVC.viewControllers.first as? T else { return nil }
            let uiConfiguration = PresentationUIConfiguration(backgroundStyle: .dimmed(alpha: 0.7), isTapBackgroundToDismissEnabled: true)
            let alignment = PresentationAlignment(vertical: .center, horizontal: .left)
            let size = PresentationSize(width: .custom(value: 243), height: .fullscreen)
            let presentation = CoverPresentation(directionShow: .left, directionDismiss: .left, uiConfiguration: uiConfiguration, size: size, alignment: alignment)
            let animator = Animator(presentation: presentation)
            animator.prepare(presentedViewController: presentedVC)
            hostViewController.present(presentedVC, animated: true, completion: nil)
            return vc
        } else {
            guard let presentedVC = UIStoryboard(name: nibName, bundle: nil).instantiateInitialViewController() as? T else { return nil }
            let uiConfiguration = PresentationUIConfiguration(backgroundStyle: .dimmed(alpha: 0.7), isTapBackgroundToDismissEnabled: true)
            let alignment = PresentationAlignment(vertical: .center, horizontal: .left)
            let size = PresentationSize(width: .custom(value: 243), height: .fullscreen)
            let presentation = CoverPresentation(directionShow: .left, directionDismiss: .left, uiConfiguration: uiConfiguration, size: size, alignment: alignment)
            let animator = Animator(presentation: presentation)
            animator.prepare(presentedViewController: presentedVC)
            hostViewController.present(presentedVC, animated: true, completion: nil)
            return presentedVC
        }
    }
    

    }

    opened by yongxuean 0
  • How to temporarily disable Canvas interaction?

    How to temporarily disable Canvas interaction?

    Hey yall, I'm trying to achieve an effect where gestures do NOT trigger the transition in some situations. For example, I built a camera and photo library view like instagram's create story, where you can slide UP on the camera view to show the library, BUT, if you started to record video, you can just hold your finger and slide up to zoom in, this conflicts with the transition.

    The outcome I want is for the animator to be TEMPORARILY disabled during video recording, i can easily implement a guard check for recording state, but I don't know which configuration to change for the Jelly transition. Any ideas?

    opened by AFKGr 0
  • I encountered a problem that the system return gesture is missing

    I encountered a problem that the system return gesture is missing

    In my project. I am using jelly to present some control pages. After control diss, after returning to the current page, The side swipe gesture on the current page is invalid. Excuse me, how to solve this problem.

    opened by sea7reen 3
  • RetainCycle issue!

    RetainCycle issue!

    I used this library in a project, and I realized that viewControllers that presented by Jelly, will NOT deinitialized!

    I just added this, to Example project of the library:

    // DismissMeController.swift
    class DismissMeController: UIViewController {
    
        deinit {
            print("DismissMeController.Deinit?!")
        }
        ...
    }
    

    the message is NOT printing after dismissing viewController.

    opened by omidgolparvar 8
  • UIModalPresentationCustom Always present On UIWindow.rootViewController

    UIModalPresentationCustom Always present On UIWindow.rootViewController

    hi there, I come with a question that, I found with option UIModalPresentationCustom, the presented view controller is always presented on UIWindow.rooViewController. I have no idea to present it on any other specific view contoller. I have tested proprety definesPresentationContext, It seems only work with option UIModalPresentationCurrentContext or UIModalPresentationOverCurrentContext to provide the presenting view controller.

    opened by SuperMarioBean 0
  • Perspective on background controller

    Perspective on background controller

    Thank you for your nice library! It would be good to have another effect on transition

    The following example create a presentation from bottom to up leaving a small portion of screen free on top.

    var presentation = JellySlideInPresentation()
    presentation.presentationCurve = .easeInEaseOut
    presentation.heightForViewController = JellyConstants.Size.custom(value: UIScreen.main.bounds.size.height - 60.0)
    presentation.directionShow = .bottom
    presentation.verticalAlignemt = .bottom
    presentation.directionDismiss = .bottom
    presentation.jellyness = .jelly
    presentation.isTapBackgroundToDismissEnabled = true
    let animator = JellyAnimator(presentation: presentation)
    animator.prepare(viewController: modal_navigation)
    
    

    I would to see the background controller showed in perspective (a little smaller)

    vn2cq

    enhancement 
    opened by malcommac 2
Releases(2.3.0)
  • 2.3.0(Jun 3, 2022)

  • 2.2.2(Oct 19, 2019)

  • 2.2.1(Jul 5, 2019)

  • 2.1.0(Dec 5, 2018)

  • 2.0.0(Nov 12, 2018)

    • interactive transitions are now possible
    • renamed FadeIn, ShiftIn, and SlideIn to Fade, Slide & Cover
    • the animator is now capable of resizing and realigning already presented viewControllers
    • presentations will be configured using new dedicated models for size, alignment etc.
    • removed the Jelly Prefix from all classes
    • extended example app with interactive examples like slide out menu etc.
    • minimum deployment target is iOS 10 now, because of UIViewPropertyAnimator
    • new Logo and overall design of Jelly related icons and ui
    Source code(tar.gz)
    Source code(zip)
  • 1.2.5(Oct 2, 2018)

  • 1.2.4(Feb 25, 2018)

    • Swift 4 support
    • custom postion option is now available though horizontal and vertical alignment parameters
    • fixed dimming view alpha issue
    Source code(tar.gz)
    Source code(zip)
  • 1.2.3(Feb 25, 2018)

  • 1.2.2(Feb 25, 2018)

  • 1.2.1(Feb 25, 2018)

  • 1.2.0(Feb 25, 2018)

    • There is a new cool animation style called shiftIn Animation. Check out the README to find out more
    • Rounding Corners can now be specified unsing the corners property (e.g. presentation.corners = [.leftBottom,rightTop])
    • You can disable tap to dismiss by setting isTapBackgroundToDismissEnabled to false
    • You can now set properties without using the basic initaliziers
    • Code clean up
    • Startet with integrating Unit-Tests
    Source code(tar.gz)
    Source code(zip)
  • 1.0.2(Feb 25, 2018)

    • New size options (fullscreen, halfscreen and custom) for width and height instead of plain CGSize
    • New alignment options for NonFullscreen Presentations
    • New marging guards - if the size you specified is bigger than the screen, the margin guards kick in and will be applied to your vc
    • If you want to size your vc using margin you can use .fullscreen as a size and set the marginGuards to constraint your vcs dimensions
    • Better Code documentation and overall structure
    • Even more Example inside the Readme and Example App
    Source code(tar.gz)
    Source code(zip)
  • 1.0(Feb 25, 2018)

    First Major Release:

    • 1.0 Provides SlideIn and FadeIn Transitions
    • Customization Options like corner-radius, background style included
    • code cleanup
    Source code(tar.gz)
    Source code(zip)
Owner
Sebastian Boldt
Professional iOS developer passionate about creating great user experiences and writing maintainable, structured, and best-practice-oriented code.
Sebastian Boldt
Present a sheet ViewController easily and control ViewController height with pangesture

PanControllerHeight is designed to present a sheet ViewController easily and control ViewController height with pangesture.

null 2 May 3, 2022
SwiftMessages is a very flexible view and view controller presentation library for iOS.

SwiftMessages Overview SwiftMessages is a very flexible view and view controller presentation library for iOS. Message views and view controllers can

SwiftKick Mobile 6.7k Jan 2, 2023
Animated alert library like Swarm app.

TKSwarmAlert Animation Tool for Alert like Swarm app. ScreenShot Installation CocoaPods You can use CocoaPods to install TKSwarmAlert by adding it to

Takuya Okamoto 581 Dec 2, 2022
SplitSheet - A lightweight, fully interactive split-screen sheet.

SplitSheet A lightweight, fully interactive split-screen sheet. Powered by UIScrollView for super-smooth gestures. Show/hide either programmatically o

Andrew Zheng 154 Dec 15, 2022
Beautiful animated Alert View. Written in Swift

SCLAlertView Animated Alert View written in Swift, which can be used as a UIAlertView or UIAlertController replacement. Since UIAlertView is deprecate

Viktor Radchenko 5.2k Jan 3, 2023
Live animated Alert View for iOS written in Swift

Sweet Alert iOS Beautiful Animated custom Alert View inspired from javascript library SweetAlert. Written in Swift this SweetAlertView can be used in

Sahil 2k Dec 22, 2022
Advance animated alerts for iOS written in Swift

LIHAlert LIHAlert provides animated banners for iOS. Updated to Swift 3 Demo Project The LIHAlert workspace contains a demo project, also used for dev

null 37 Dec 9, 2022
Beautiful animated Login Alert View. Written in Objective-C

UIAlertView - Objective-C Animated Login Alert View written in Swift but ported to Objective-C, which can be used as a UIAlertView or UIAlertControlle

Letovsky 2 Dec 22, 2021
Animated Alert written in SwiftUI.

TransactionAlert Animated Alert written in SwiftUI. Easy to use Get Started Add a TAViewModel instance as an environment object to your Root View in y

null 11 Jul 21, 2022
Customizable simple Alert and simple ActionSheet for Swift

SimpleAlert It is simple and easily customizable alert. Can be used as UIAlertController. Appetize's Demo Requirements Swift 5.0 iOS 9.0 or later How

Kyohei Ito 397 Dec 6, 2022
A Simple Toast Library for iOS

PowerplayToastKit Toasts Type Success. Warning Error Info Custom View (Dialog) Example To run the example project, clone the repo, and run pod install

Mithilesh Parmar 18 Jul 2, 2022
zekunyan 608 Dec 30, 2022
It is a highly configurable iOS library which allows easy styling with built in styles as well as extra header and footer views so that you can make extremely unique alerts and action sheets.

 CFAlertViewController CFAlertViewController is a library that helps you display and customise Alerts, Action Sheets, and Notifications on iPad and i

Crowdfire Inc. 1.1k Dec 18, 2022
Lightweight dropdown message bar in Swift. It's simple and beautiful.

SwiftyDrop SwiftyDrop is a lightweight pure Swift simple and beautiful dropdown message. Features Easy to use like: Drop.down("Message") Message field

Morita Naoki 691 Nov 20, 2022
Whisper is a component that will make the task of display messages and in-app notifications simple. It has three different views inside

Description ?? Break the silence of your UI, whispering, shouting or whistling at it. Whisper is a component that will make the task of displaying mes

HyperRedink 3.7k Dec 25, 2022
AlertView A pop-up framework, Can be simple and convenient to join your project.

RAlertView AlertView A pop-up framework, Can be simple and convenient to join your project. Warning content Installation Depend on the project Masonry

杜耀辉 71 Aug 12, 2022
A simple and attractive AlertView to ask permission to your users for Push Notification.

A simple and attractive AlertView **to ask permission to your users for Push Notification.** PRESENTATION Ask permission to user for push notification

Boisney Philippe 37 Mar 23, 2022
A simple alert with logo image and color.

YMLogoAlert About YMLogoAlert A simple custom alert. YMLogoAlert lets you pop up a simple alert with a natural animation, your app's own color, font a

Youngminah 8 Dec 21, 2022
A Simple And Minimalist iOS AlertController

HYAlertController HYAlertController is a minimalist alert control, that contains a variety of usage scenarios. It has the same syntax as Apple's UIAle

null 63 Jul 26, 2022