rolling-number

components.rolling-digit.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.rolling-number.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'rolling-number'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.rolling-number {
  height: 1.1em;
  overflow: hidden;
}

.rolling-digit {
  float:left;
  list-style-type: none;
  line-height: 1em;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  padding-left: 0;
}

.rolling-digit-target--0 {
    animation-name: rolling-digit-target--0;
}

.rolling-digit-target--1 {
    animation-name: rolling-digit-target--1;
}

.rolling-digit-target--2 {
    animation-name: rolling-digit-target--2;
}

.rolling-digit-target--3 {
    animation-name: rolling-digit-target--3;
}

.rolling-digit-target--4 {
    animation-name: rolling-digit-target--4;
}

.rolling-digit-target--5 {
    animation-name: rolling-digit-target--5;
}

.rolling-digit-target--6 {
    animation-name: rolling-digit-target--6;
}

.rolling-digit-target--7 {
    animation-name: rolling-digit-target--7;
}

.rolling-digit-target--8 {
    animation-name: rolling-digit-target--8;
}

.rolling-digit-target--9 {
    animation-name: rolling-digit-target--9;
}


.rolling-digit--0 {
    margin-top: 0em;
}

.rolling-digit--1 {
    margin-top: -1em;
}

.rolling-digit--2 {
    margin-top: -2em;
}

.rolling-digit--3 {
    margin-top: -3em;
}

.rolling-digit--4 {
    margin-top: -4em;
}

.rolling-digit--5 {
    margin-top: -5em;
}

.rolling-digit--6 {
    margin-top: -6em;
}

.rolling-digit--7 {
    margin-top: -7em;
}

.rolling-digit--8 {
    margin-top: -8em;
}

.rolling-digit--9 {
    margin-top: -9em;
}

@keyframes rolling-digit-target--0 {
    100% {
        margin-top: 0em;
    }
}

@keyframes rolling-digit-target--1 {
    100% {
        margin-top: -1em;
    }
}

@keyframes rolling-digit-target--2 {
    100% {
        margin-top: -2em;
    }
}

@keyframes rolling-digit-target--3 {
    100% {
        margin-top: -3em;
    }
}

@keyframes rolling-digit-target--4 {
    100% {
        margin-top: -4em;
    }
}

@keyframes rolling-digit-target--5 {
    100% {
        margin-top: -5em;
    }
}

@keyframes rolling-digit-target--6 {
    100% {
        margin-top: -6em;
    }
}

@keyframes rolling-digit-target--7 {
    100% {
        margin-top: -7em;
    }
}

@keyframes rolling-digit-target--8 {
    100% {
        margin-top: -8em;
    }
}

@keyframes rolling-digit-target--9 {
    100% {
        margin-top: -9em;
    }
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<div style="font-size: 1.5em;">
	{{rolling-number}}
  5.108.629,473
</div>

templates.components.rolling-digit.hbs

<ul class="rolling-digit {{concat "rolling-digit--" current}} {{concat "rolling-digit-target--" target}}">
	<li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

templates.components.rolling-number.hbs

{{rolling-digit current=1 target=5}}
<span style="float:left;">.</span>
{{rolling-digit current=8 target=1}}
{{rolling-digit current=2 target=0}}
{{rolling-digit current=9 target=8}}
<span style="float:left;">.</span>
{{rolling-digit current=3 target=6}}
{{rolling-digit current=6 target=2}}
{{rolling-digit current=4 target=9}}
<span style="float:left;">,</span>
{{rolling-digit current=1 target=4}}
{{rolling-digit current=2 target=7}}
{{rolling-digit current=4 target=3}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}