Latest 0.2.1
License MIT
Platforms ios 9.0

License: MIT

Component to display string with scroll animation for each numerical symbol. Scrolling directions, animation durations and time offsets can be easily customized.

Swift 3, Swift 4 and Swift 4.2 are supported.

All random



CocoaPods is the preffered way to add NumberScrollAnimatedView to your project.

Just add following line to your Podfile

pod 'NumberScrollAnimatedView'

Then run a pod install inside your terminal.

After that you can include NumberScrollAnimatedView wherever you need it with

import NumberScrollAnimatedView


If you don’t want to use dependency manager, you can add NumberScrollAnimatedView in your project manually.

You can do it coping "NumberScrollAnimatedView" folder with two files "NumberScrollableColumn.swift" and "NumberScrollAnimatedView.swift" to your project.


let animatedView = NumberScrollAnimatedView()

// Add to superview, configure view constraints etc...

// Customize a view properties like background color, font size and color
animatedView.backgroundColor = UIColor(red: 255/255, green: 47/255, blue: 146/255, alpha: 1)
animatedView.font = UIFont.boldSystemFont(ofSize: 64)
animatedView.textColor = .white

// Set animation properties
animatedView.animationDuration = 5
animatedView.scrollingDirectionRule = { (_, columnIndex) in return (columnIndex % 2) == 0 ? .down : .up }

// Set a value which will be displayed
animatedView.text = "220-548"

// Start animation

Animation parameters

  • animationDuration
  • animationTimeOffsetRule, specifies the offset of the animation start time for each numerical symbol. By default this function return random values from 0 to 1.
  • animationDurationOffsetRule, specifies the change in animation duration for each numerical symbol. By default this function return random values from 0 to 1.
  • scrollingDirectionRule, specifies the animation direction (UP or DOWN) for each numerical symbol. By default this rule return random values.
  • inverseSequenceRule, specifies whether to invert the sequence of numbers or not. Default sequence is 0123456789, inverted – 9876543210

Animation examples

  1. By default. All animation parameters are random.

All random

  1. Scrolling direction is down.

    animatedView.scrollingDirectionRule = { (_, _) in return .down }

    Scrolling direction is down

  2. Scrolling direction is up, sequence is not inverted, animation duration is the same for all columns.
    animatedView.scrollingDirectionRule = { (_, _) in return .up }
    animatedView.inverseSequenceRule = { (_, _) in return false }
    animatedView.animationDurationOffsetRule = { (_, _) in return 0 }

    Scrolling direction is up, sequence don't inverted,  animation duration the same for all columns


Created by Alexander Smetannikov ([email protected])

Latest podspec

    "name": "NumberScrollAnimatedView",
    "version": "0.2.1",
    "summary": "UIView based component for displaying string with scroll animation for each numerical symbol",
    "homepage": "",
    "license": {
        "type": "MIT"
    "authors": {
        "Alexander Smetannikov": "[email protected]"
    "platforms": {
        "ios": "9.0"
    "swift_version": "4.2",
    "source": {
        "git": "",
        "tag": "0.2.1"
    "source_files": "NumberScrollAnimatedView/*.{swift}"

Pin It on Pinterest

Share This