🌊 - 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
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations.

SamuraiTransiton is a ViewController transition framework in Swift. It is an animation as if Samurai cut out the screen with a sword. transition types

hachinobu 273 Dec 29, 2022
A simple way to create custom interactive UIViewController transitions

EasyTransitions is a library that helps developers create custom interactive transitions using simple functions defined in a protocol and avoid handli

Marcos Griselli 1.6k Jan 1, 2023
Library for smooth animation of images during transitions.

ImageTransition ImageTransition is a library for smooth animation of images during transitions. Something looks like below: e.g. UIImageView e.g. UIIm

shtnkgm 207 Dec 3, 2022
Allows trendy transitions using swipe gesture such as "swipe back anywhere".

SwipeTransition allows trendy transitions using swipe gesture such as "swipe back". Try the demo on the web (appetize.io): https://appetize.io/app/peb

Tatsuya Tanaka 294 Dec 27, 2022
Painless custom transitioning. Easy extend, easy setup, just focus on animations.

TransitionManager Painless custom transitioning. Easy extend, easy setup, just focus on animations. Installation CocoaPods You can use CocoaPods to in

Cem Olcay 205 Aug 23, 2022
Custom interactive transition like Apple Music iOS App (iOS 9). written in Swift.

MusicPlayerTransition Custom interactive transition like Apple Music iOS App. written in Swift. Demo See demo on Appetize.io Using Transition Animator

Airin 642 Nov 17, 2022
Simple and elegant Dropdown Transition

Simple and elegant dropdown transition for iOS Why? I needed to perform the dropdown transition in the app I was building and I've found many great li

Aidar Nugmanoff 63 Sep 22, 2022
Elegant transition library for iOS & tvOS

Hero is a library for building iOS view controller transitions. It provides a declarative layer on top of the UIKit's cumbersome transition APIs—makin

Hero Transitions 21.2k Jan 3, 2023
A custom modal transition that presents and dismiss a controller with an expanding bubble effect.

A custom modal transition that presents and dismiss a controller inside an expanding and shrinking bubble. Screenshot Usage Install through CocoaPods:

Andrea Mazzini 3.3k Dec 28, 2022
Use PanGesture to dismiss view on UIViewController and UIView

PanSlip Use PanGesture to dismiss view on UIViewController and UIView. Introduction PanSlip to UIViewController left to right right to left top to bot

DongHee Kang 101 Dec 10, 2022
A Splash view that animates and reveals its content, inspired by Twitter splash

RevealingSplashView A Splash view that animates and reveals its content, inspired by the Twitter splash. ⭐ Features Customizable reveal icon image. Cu

Chris Jimenez 1.2k Jan 4, 2023
🌊 - Jelly is a library for animated, non-interactive & interactive viewcontroller transitions and presentations with the focus on a simple and yet flexible API.

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

Sebastian Boldt 2.4k Dec 25, 2022
Easy interactive interruptible custom ViewController transitions

Introduction Transition is a library that helps you build iOS view controller transitions. Implementing a nice interactive custom view controller tran

Touchwonders 2.6k Dec 20, 2022
Swift wrapper for custom ViewController presentations on iOS

Presentr is a simple customizable wrapper for the Custom View Controller Presentation API introduced in iOS 8. About iOS let's you modally present any

Icalia Labs 2.9k Jan 3, 2023
AlertTransition is a extensible library for making view controller transitions, especially for alert transitions.

AlertTransition AlertTransition is a extensible library for making view controller transitions, especially for alert transitions. Overview AlertTransi

Loopeer 570 Nov 29, 2022
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations.

SamuraiTransiton is a ViewController transition framework in Swift. It is an animation as if Samurai cut out the screen with a sword. transition types

hachinobu 273 Dec 29, 2022
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations.

SamuraiTransiton is a ViewController transition framework in Swift. It is an animation as if Samurai cut out the screen with a sword. transition types

hachinobu 273 Dec 29, 2022
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
A non gesture blocking, non clipping by default custom scroll view implementation with example code

A non gesture blocking, non clipping by default custom scroll view implementation with example code

Marco Boerner 10 Dec 6, 2022