Using countUP.js to animate number on dashboard in Framerjs
Inspired by Oleksii Drozdenko’s great article：
I tried to design a dashboard for my product, a 2B data analytical platform using some his methods. In the case, he was using AE to simulate the number animation. Since switching to Framer as prototyping tool , I try to finish the job within Framer.
Framer is great to animate layer object. However, continually animated numerical data is not its strong suit . I mean it can be done by Framer but not in a quick and clean way. Maybe because I am new to Framer and not wise enough to achieve that. Please tell me if anyone has better way out.
After look around, countUp.js is one of the best to get me there.
CountUp.js is a dependency-free, lightweight JavaScript “class” that can be used to quickly create animations that display numerical data in a more interesting way. — countUp.js introduction from https://github.com/inorganik/countUp.js
Using it , just a few steps to do the job.
First, install countUp.js in npm
# In your terminalcd ~/my-project.framernpm install countup.js --save
Create a new module in /modules, and name it npm.coffee.
# File: modules/npm.coffee, PLEASE NOTE the require IS countup.js NOT countupexports.countup = require "countup.js"
After a refresh, you can import countup into your project.
# Import the countup module from your npm{countup} = require "npm"
Step 2. importing sketch file
The original sketch have numbers. Using the number parameter to set the CSS of the layer in step3.
After importing, it looks like below in terms of structure:
Step 3. create layer
Using the holder layer which can be manipulated, you can place it wherever you want.
# create TC layer using the font parameters with CSS sketch.TC.html = "<div id='TC' style='height: 270px; width: 250px; padding-left:66px; padding-top:29px; font-size:120px'></div>"
Step 4. hide the number and replace them by countup.js
# using TC id to connect the number animation to the layer and set up the parameters of the animation, 0 is the start number, and 56 is the maximum number, 0 is the decimal and 8 is the speed!TCNumber = new countup("TC", 0, 56,0,8)
TCNumber.start()
case example looks like this:
