Jelly

Create rich viewcontroller transition animations with just a few lines of code

Jelly provides custom view controller transitions with just a few lines of code. No need to create your own Presentation-Controller or Animator objects. A Jelly-Animator will do the heavy lifting for you.

📱 Example

You can use Jelly to build your own Alertviews or Slidein-Menus using ViewControllers designed by yourself.

To run the example project, clone the repo, and run pod install from the Example directory first.

🔧How to use

Jelly is super easy to use.

1. Create a JellyPresentation Object (SlideIn, FadeIn or ShiftIn)
2. Initialize a JellyAnimator using the JellyPresentation Object created in Step 1.
3. Call the prepare(viewController:UIViewController) Function
4. Finally call the native UIViewController presentation function.

override func viewDidLoad() {
    super.viewDidLoad()
    let viewController = self.storyboard.instantiateViewController(withIdentifier: "someViewController")
    //1.
    let presentation = JellySlideInPresentation()
    //2.
    self.jellyAnimator = JellyAnimator(presentation:presentation)
    //3.
    self.jellyAnimator?.prepare(viewController: viewController)
    //4.
    self.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 JellyAnimator inside the UIViewController you are presenting from or the central object that maintains your presentations.

class CustomVC : UIViewController {
    var jellyAnimator: JellyAnimator?
    override func viewDidLoad() {
        super.viewDidLoad()
        var shiftInPresentation = JellyShiftInPresentation()
        shiftInPresentation.direction = .left
        let animator = JellyAnnimator(presentation:presentation)
        self.jellyAnimator = animator
    }
}

That's it. That's lit.

🖌 Customize

Jelly offers 3 types of Presentations for you:

• JellySlideInPresentation
• JellyShiftInPresentation
• JellyFadeInPresentation

Not every property is available for each animation. Check out the interfaces of each class to learn more about them.

• duration: JellyConstants.Duration (default: normal)
  • ultraSlow = 2.0
  • slow = 1.0
  • medium = 0.5
  • normal = 0.35
  • fast = 0.2
  • reallyFast = 0.1
• backgroundStyle: JellyConstants.BackgroundStyle (default: .dimmed(0.5))
  • dimmed(alpha: CGFloat)
  • blur(effectStyle: UIBlurEffectStyle)
  • if you want a transparent background use .dimmed(alpha:0.0)
• cornerRadius: Double (default: 0)
• corners: UIRectCorner (default: .allCorners)
  • define which corners the radius should be applied to
• presentationCurve: JellyConstants.JellyCurve (default: linear)
  • easeIn
  • easeOut
  • easeInEaseOut
  • linear
• dismissCurve: JellyConstants.JellyCurve (default: linear)
  • easeIn
  • easeOut
  • easeInEaseOut    * linear
• isTapBackgroundToDismissEnabled (default: true)
  • tapping the background dismisses the ViewController by default
  • set it to false to prevent this behavior
• widthForViewController: JellyConstants.Size (default: fullscreen)
  • If the container is smaller than the provided width, Jelly will automatically resize to the containers width
  • if Margin Guards are specified they also will be applied if width is to wide for the container
• heightForViewController: JellyConstants.Size (default: fullscreen)
  • If the container is smaller than the provided height, Jelly will automatically resize to the containers width
  • if Margin Guards are specified they also will be applied when height is to high for the container
• horizontalAlignment: JellyConstants.HorizontalAlignment (default: .center)
  • center, left or right
• verticalAlignemt: JellyConstants.VerticalAlignment (default:center)
  • top, bottom, center
• marginGuards: default(UIEdgeInsets.zero)
  • If the width or height is bigger than the container we are working with, marginGuards will kick in and limit the size using the specified margins
• directionShow: JellyConstants.Direction (default: top)
  • left, top, bottom, right
• directionDismiss: JellyConstants.Direction (default: top)
  • left, top, bottom, right
• jellyness: (default: none)
  • none (damping = 1.0, velocity = 0.0)
  • jelly (damping = 0.7, velocity = 2)
  • jellier (damping = 0.5 , velocity = 3)
  • jelliest (damping = 0.2, velocity = 4)

let customPresentation = JellySlideInPresentation(dismissCurve: .linear,
                                                    presentationCurve: .linear,
                                                         cornerRadius: 15,
                                                      backgroundStyle: .blur(effectStyle: .light),
                                                            jellyness: .jellier,
                                                             duration: .normal,
                                                        directionShow: .top,
                                                     directionDismiss: .top,
                                               widthForViewController: .fullscreen,
                                              heightForViewController: .custom(value:200) ,
                                                  horizontalAlignment: .center,
                                                    verticalAlignment: .top,
                                                         marginGuards: UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10),
                                                              corners: [.topLeft,.bottomRight])


self.jellyAnimator = JellyAnimator(presentation:customPresentation)
self.jellyAnimator?.prepare(viewController: viewController)
self.present(viewController, animated: true, completion: nil)

✅ Requirements

Deployment target of your App is >= iOS 8.0

📲 Installation

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

pod "Jelly"

🗣 Mentions

• Mentioned in iOS Dev Weekly by @Dave Verwer - Issue NO. 112
• Mentioned in This Week in Swift by @Natasha the Robot - Issue No. 279

🤖 Author

Sebastian Boldt, http://sebastianboldt.com

📄 License

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