Version License Platform

RollingNumbers is a lightweight UIView for getting smooth rolling animation between numbers implemented using only CALayer.

WeahterLogger App Icon

In Triumph Arcade building Triumph SDK for game developers. I had a task to create Rolling Numbers animation for a balance component. Sometimes we cannot afford to use third-party libraries, so I decided to make my own solution using only CALayers in purpose to avoid performance issues.


  • iOS 11.0+
  • Swift 5.0+



RollingNumbers is available through CocoaPods:

pod 'RollingNumbers'

Swift Package Manager


Initialize a RollingNumbersView.

let view = RollingNumbersView()

Set number with animation


Set number without animation



var rollingNumbersView = {
    // Initialize Rolling Numbers view with initial number value
    let view = RollingNumbersView(number: 1234.56)
    // Configure animation type
    view.animationType = .onlyChangedDigits
    // Rolling direction will scroll only up
    view.rollingDirection = .up
    // Spacing between numbers
    view.characterSpacing = 1
    // Text color
    view.textColor = .black
    // Alignment within UIView
    view.alignment = .left
    // UIFont
    view.font = .systemFont(ofSize: 48, weight: .medium)
    let formatter = NumberFormatter()
    formatter.numberStyle = .currency
    view.formatter = formatter
    return view

Animation Type

Type Description
allNumbers All numbers roll if even only one number change
onlyChangedNumbers Only changed numbers roll
allAfterFirstChangedNumber All numbers roll after first changed number
noAnimation Numbers change without animation

Animation Direction

Type Description
up Rolling animation direction from up to down
down Rolling animation direction from down to up

Specific Configureation

Set text color with animation with optional transition duration between existing color and the next one.

rollingNumbersView.setTextColor(.blue, withAnimationDuration: 3)

Animation Configuration

rollingNumbersView.animationConfiguration = RollingNumbersView.AnimationConfiguration(
    duration: 3,
    speed: 0.3,
    damping: 17,
    initialVelocity: 1


Use completion for each numbers animation

rollingNumbersView.setNumberWithAnimation(245699) {
    // completion


Be welcome to contribute to this project!


This project was released under the MIT license.


Max Kalik, [email protected]


View Github