Convert Figma logo to code with AI

Ramotion logopaper-onboarding

:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion

3,323
337
3,323
9
View on GitHub

Top Related Projects

Ramotion's avatar

folding-cell

10,225

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

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

Yalantis's avatar

Side-Menu.iOS

2,717

Animated side menu with customizable UI

Yalantis's avatar

Context-Menu.iOS

1,836

You can easily add awesome animated context menu to your app.

Ramotion's avatar

expanding-collection

5,552

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Ramotion's avatar

circle-menu

3,438

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Quick Overview

The Ramotion/paper-onboarding repository is a Swift library that provides a beautiful and customizable onboarding experience for iOS applications. It features a paper-like animation and a smooth scrolling effect, creating an engaging and visually appealing introduction for users.

Pros

  • Visually Appealing: The paper-like animation and smooth scrolling create a polished and visually stunning onboarding experience.
  • Customizable: The library offers a high degree of customization, allowing developers to tailor the onboarding screens to match their app's branding and design.
  • Easy to Integrate: The library is well-documented and provides a straightforward integration process, making it easy for developers to implement in their projects.
  • Responsive Design: The onboarding screens are designed to adapt to different device sizes and orientations, ensuring a consistent user experience across various iOS devices.

Cons

  • Swift-only: The library is written in Swift, which may be a limitation for developers working with Objective-C-based projects.
  • Limited Functionality: While the library provides a great onboarding experience, it may lack some advanced features or customization options compared to building a custom onboarding solution.
  • Dependency on External Libraries: The library relies on the Lottie animation framework, which adds an additional dependency to the project.
  • Potential Performance Issues: Depending on the complexity of the onboarding screens and animations, the library may have some performance implications, especially on older or less powerful iOS devices.

Code Examples

// Initialize the onboarding view controller
let onboardingViewController = PaperOnboardingViewController(dataSource: self)

// Set the background color
onboardingViewController.backgroundImage = UIImage(named: "background")

// Customize the appearance of the page control
onboardingViewController.pageControl.currentPageIndicatorTintColor = .white
onboardingViewController.pageControl.pageIndicatorTintColor = UIColor.white.withAlphaComponent(0.2)

This code demonstrates how to initialize the PaperOnboardingViewController and customize the background image and page control appearance.

// Implement the PaperOnboardingDataSource protocol
extension ViewController: PaperOnboardingDataSource {
    func onboardingItemsCount() -> Int {
        return 3
    }

    func onboardingItem(at index: Int) -> PaperOnboardingItem {
        let item = PaperOnboardingItem(informationImage: UIImage(named: "image\(index)")!,
                                       title: "Title \(index)",
                                       description: "Description \(index)")
        return item
    }
}

This code shows how to implement the PaperOnboardingDataSource protocol to provide the data for the onboarding screens.

// Present the onboarding view controller
let onboardingViewController = PaperOnboardingViewController(dataSource: self)
present(onboardingViewController, animated: true, completion: nil)

This code demonstrates how to present the PaperOnboardingViewController in your application.

Getting Started

To get started with the Ramotion/paper-onboarding library, follow these steps:

  1. Add the library to your project using a dependency manager like CocoaPods or Carthage.

    # CocoaPods
pod 'paper-onboarding'

  2. Import the PaperOnboarding module in your Swift file.

    import PaperOnboarding

  3. Create an instance of the PaperOnboardingViewController and set the data source.

    let onboardingViewController = PaperOnboardingViewController(dataSource: self)

  4. Implement the PaperOnboardingDataSource protocol to provide the data for the onboarding screens.

    extension ViewController: PaperOnboardingDataSource {
    func onboardingItemsCount() -> Int {
        return 3
    }

    func onboardingItem(at index: Int) -> PaperOnboardingItem {
        let item = PaperOnboardingItem(informationImage: UI

Competitor Comparisons

Ramotion logo

folding-cell

10,225

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

Pros of folding-cell

  • More versatile UI component, suitable for various use cases
  • Provides a unique and engaging cell expansion animation
  • Offers more customization options for content and appearance

Cons of folding-cell

  • May require more complex implementation for certain scenarios
  • Potentially less intuitive for users compared to standard onboarding flows
  • Limited to cell-based layouts, which may not fit all design requirements

Code Comparison

folding-cell:

let cell = FoldingCell()
cell.itemCount = 2
cell.backgroundColor = .clear

cell.foregroundView = foregroundView
cell.containerView = containerView

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.delegate = self

view.addSubview(onboarding)

Both libraries offer easy-to-use components for enhancing iOS user interfaces. folding-cell provides a unique cell expansion animation, while paper-onboarding focuses on creating smooth onboarding experiences. The choice between the two depends on the specific requirements of your project and the desired user interaction style.

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

  • More versatile, can be used in various parts of an app beyond onboarding
  • Offers a wider range of customization options for tab bar animations
  • Actively maintained with more recent updates

Cons of animated-tab-bar

  • Focuses solely on tab bar animations, less comprehensive for full onboarding experiences
  • May require more setup and configuration for complex use cases
  • Potentially higher learning curve for developers new to custom UI components

Code Comparison

animated-tab-bar:

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

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.delegate = self
view.addSubview(onboarding)
onboarding.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([...])

Both repositories provide iOS UI components, but they serve different purposes. animated-tab-bar focuses on creating engaging tab bar animations, while paper-onboarding offers a complete onboarding experience. The choice between them depends on the specific needs of your app and the desired user experience.

Yalantis logo

Side-Menu.iOS

2,717

Animated side menu with customizable UI

Pros of Side-Menu.iOS

  • More focused on a specific UI component (side menu)
  • Easier to integrate for projects specifically needing a side menu
  • Potentially lighter weight due to its specialized nature

Cons of Side-Menu.iOS

  • Less versatile compared to the multi-step onboarding flow
  • May require additional libraries for more complex UI interactions
  • Limited to iOS platform, while paper-onboarding supports multiple platforms

Code Comparison

Side-Menu.iOS:

let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: YourViewController)
SideMenuManager.default.leftMenuNavigationController = menuLeftNavigationController

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.delegate = self
view.addSubview(onboarding)

The Side-Menu.iOS code focuses on setting up a side menu navigation controller, while paper-onboarding initializes an onboarding flow. paper-onboarding appears to have a more straightforward setup process, but Side-Menu.iOS provides more specific functionality for side menu implementation.

Yalantis logo

Context-Menu.iOS

1,836

You can easily add awesome animated context menu to your app.

Pros of Context-Menu.iOS

  • More specialized functionality for context menus
  • Highly customizable appearance and animations
  • Extensive documentation and usage examples

Cons of Context-Menu.iOS

  • Limited to iOS platform only
  • Less frequently updated compared to paper-onboarding
  • Narrower scope of application (focused on context menus)

Code Comparison

Context-Menu.iOS:

let menuController = ContextMenuController()
menuController.menuItems = [MenuItem(title: "Copy"), MenuItem(title: "Paste")]
menuController.showInView(self.view, atLocation: CGPoint(x: 100, y: 100))

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.delegate = self
view.addSubview(onboarding)

The code snippets demonstrate the primary usage of each library. Context-Menu.iOS focuses on creating and displaying context menus, while paper-onboarding is designed for creating onboarding experiences with animated transitions between pages.

Both libraries offer easy-to-use APIs, but they serve different purposes. Context-Menu.iOS is more specialized for context menu interactions, while paper-onboarding provides a broader solution for onboarding flows in iOS applications.

Ramotion logo

expanding-collection

5,552

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Pros of expanding-collection

  • More visually appealing with its expanding card animation
  • Offers a unique and engaging user interface for collection views
  • Provides a customizable layout for displaying content

Cons of expanding-collection

  • More complex implementation compared to paper-onboarding
  • May require more system resources due to animations
  • Limited to specific use cases (collection views)

Code Comparison

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.delegate = self
view.addSubview(onboarding)

expanding-collection:

let layout = ExpandingCollectionViewLayout()
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.register(ExpandingCollectionViewCell.self, forCellWithReuseIdentifier: "cell")
collectionView.dataSource = self
collectionView.delegate = self

Both repositories offer unique UI components for iOS applications. paper-onboarding focuses on creating smooth onboarding experiences with customizable pages and transitions. expanding-collection, on the other hand, provides an innovative way to display collection views with expanding card animations.

While paper-onboarding is more straightforward to implement and suitable for various app types, expanding-collection offers a more visually striking interface but may be limited to specific use cases. The choice between the two depends on the project requirements and desired user experience.

Ramotion logo

circle-menu

3,438

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Pros of circle-menu

  • More interactive and visually appealing menu design
  • Supports customizable icons and colors for menu items
  • Can be easily integrated into various parts of an app's UI

Cons of circle-menu

  • Limited to circular layout, which may not fit all design needs
  • Potentially less intuitive for users unfamiliar with radial menus
  • May occupy more screen space compared to traditional linear menus

Code Comparison

circle-menu:

let circleMenu = CircleMenu(
    frame: view.bounds,
    normalIcon:"icon_menu",
    selectedIcon:"icon_close",
    buttonsCount: 4,
    duration: 4,
    distance: 120)
view.addSubview(circleMenu)

paper-onboarding:

let onboarding = PaperOnboarding()
onboarding.dataSource = self
onboarding.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(onboarding)

Both libraries offer easy integration into iOS projects, but circle-menu focuses on creating an interactive circular menu, while paper-onboarding is designed for creating onboarding experiences with smooth transitions between screens. circle-menu provides more customization options for menu items, while paper-onboarding excels in creating a guided user introduction to an app's features.

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

PAPER ONBOARDING

iOS library Paper Onboarding is a material design UI slider written on Swift.

We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:

Get Free Mockup For your project →

Twitter CocoaPods CocoaPods Carthage compatible Travis codebeat badge Donate

Requirements

  • iOS 10.0+
  • Xcode 10.2

Installation

Just add the Source folder to your project.

or use CocoaPods with Podfile:

pod 'paper-onboarding'

or Carthage users can simply add to their Cartfile:

github "Ramotion/paper-onboarding"

or Swift Package Manager by adding:

dependencies: [
.package(url: "https://github.com/Ramotion/paper-onboarding.git", from: "6.1.4")
]

to Package.swift

Usage

Storyboard

  1. Create a new UIView inheriting from PaperOnboarding

  2. Set dataSource in attribute inspector

or Code

override func viewDidLoad() {
  super.viewDidLoad()

  let onboarding = PaperOnboarding()
  onboarding.dataSource = self
  onboarding.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(onboarding)

  // add constraints
  for attribute: NSLayoutAttribute in [.Left, .Right, .Top, .Bottom] {
    let constraint = NSLayoutConstraint(item: onboarding,
                                        attribute: attribute,
                                        relatedBy: .Equal,
                                        toItem: view,
                                        attribute: attribute,
                                        multiplier: 1,
                                        constant: 0)
    view.addConstraint(constraint)
  }
}

For adding content use dataSource methods:

  func onboardingItem(at index: Int) -> OnboardingItemInfo {

   return [
     OnboardingItemInfo(informationImage: IMAGE,
                                   title: "title",
                             description: "description",
                                pageIcon: IMAGE,
                                   color: UIColor.RANDOM,
                              titleColor: UIColor.RANDOM,
                        descriptionColor: UIColor.RANDOM,
                               titleFont: UIFont.FONT,
                         descriptionFont: UIFont.FONT),

     OnboardingItemInfo(informationImage: IMAGE,
                                    title: "title",
                              description: "description",
                                 pageIcon: IMAGE,
                                    color: UIColor.RANDOM,
                               titleColor: UIColor.RANDOM,
                         descriptionColor: UIColor.RANDOM,
                                titleFont: UIFont.FONT,
                          descriptionFont: UIFont.FONT),

    OnboardingItemInfo(informationImage: IMAGE,
                                 title: "title",
                           description: "description",
                              pageIcon: IMAGE,
                                 color: UIColor.RANDOM,
                            titleColor: UIColor.RANDOM,
                      descriptionColor: UIColor.RANDOM,
                             titleFont: UIFont.FONT,
                       descriptionFont: UIFont.FONT)
     ][index]
 }

 func onboardingItemsCount() -> Int {
    return 3
  }

configuring content item:

func onboardingConfigurationItem(item: OnboardingContentViewItem, index: Int) {

//    item.titleLabel?.backgroundColor = .redColor()
//    item.descriptionLabel?.backgroundColor = .redColor()
//    item.imageView = ...
  }

🗂 Check this library on other language:

📄 License

Paper Onboarding is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.