![](\"https://raw.githubusercontent.com/franciscop/ola/master/docs/line.gif\")
\n\n\n\n```js\n// Start tracking the value\nconst pos = Ola({ y: 0 });\n\n// Set the value to update async\npos.set({ y: 100 });\n\n// Read the evolution over time\nsetInterval(() => graph(pos.y), 5);\n```\n\nIt works with multiple values/dimensions:\n\n\n ![](\"https://raw.githubusercontent.com/franciscop/ola/master/docs/ball.gif\")
\n\n\n```js\nconst pos = Ola({ x: 0, y: 0 });\n\nwindow.addEventListener('click', e => {\n pos.set({ x: e.pageX, y: e.pageY });\n});\n\nsetInterval(() => {\n ball.style.left = `${pos.x}px`;\n ball.style.top = `${pos.y}px`;\n}, 10);\n```\n\nAlso works great with many instances since they are independent:\n\n\n ![](\"https://raw.githubusercontent.com/franciscop/ola/master/docs/dots.gif\")
\n\n\n```js\n// Generates 1000 instances seamlessly\nconst dots = Ola(Array(1000).fill(0));\n\n// Everything updates every 600ms\nsetInterval(() => dots.forEach((dot, i) => {\n dots[i] = Math.random();\n}), 600);\n\n// ... read + paint screen here\n```\n\n> Tip: click on the GIFs for a live demo with the code :)\n\n## Getting started\n\nInstall it with npm:\n\n```\nnpm install ola\n```\n\nThen import it and use it:\n\n```js\nimport Ola from \"ola\";\nconst pos = Ola({ x: 0 });\nconsole.log(pos.x); // 0\n```\n\nIf you prefer to use a CDN:\n\n```html\n\n\n```\n\n## Documentation\n\nThere are three distinct operations that can be run: creating an instance, setting it to update and reading it.\n\n### Create an instance\n\n```js\nOla(initial, time = 300);\n```\n\nThe first parameter is the initial value. It can be either a single number, or an object of `key:numbers` or an array of numbers:\n\n```js\nconst heater = Ola(20); // Alias of `{ value: 20 }`\nconst motor = Ola({ angle: 180 }); // A named parameter for clarity\nconst position = Ola({ x: 0, y: 0 }); // Any number of properties\nconst heights = Ola([0, 0, 0, 0]); // A group of heights\n```\n\nThe second parameter is how long the transition will last. It should be a number that represents the time in milliseconds:\n\n```js\nconst heater = Ola(20); // Default = 300 ms\nconst motor = Ola({ angle: 180 }, 1000); // Turn the motor slowly\nconst position = Ola({ x: 0, y: 0 }, 100); // Quick movements for the position\nconst heights = Ola([0, 0, 0, 0], 300); // 300, same as the default\n```\n\nPassing a single number as a parameter is the same as passing `{ value: num }`, we are just helping by setting a shortname. It is offered for convenience, but recommend not mixing both styles in the same project.\n\nIt works with Javascript numbers, but please keep things reasonable (under `Number.MAX_VALUE / 10`):\n\n```js\nconsole.log(Ola(100));\nconsole.log(Ola(-100));\nconsole.log(Ola(0.001));\nconsole.log(Ola(1 / 100));\n```\n\nThe time it takes to update can also be updated while setting the value, which will update it for any subsequent transition:\n\n```js\n// All `pos.set()` will take 1 full second\nconst pos = Ola({ x: 0 }, 1000);\npos.set({ x: 100 }, 3000);\n```\n\n### Update the value\n\n```js\nheater.value = 25; // Since the constructor used a number, use `.value`\nmotor.angle = 90; // Turn -90 degrees from before\nposition.set({ x: 100, y: 100 }); // Move 0,0 => 100,100\nheights[1] = 120; // Move the second (0-index) item to 120\n```\n\nWhen we update a property **it is not updated instantaneously** (that's the whole point of this library), but instead it's set to update asynchronously:\n\n```js\nconst pos = Ola({ x: 0 });\npos.set({ x: 100 });\n\n// 0 - still hasn't updated\nconsole.log(pos.x);\n\n// 100 - after 300ms it's fully updated\nsetTimeout(() => console.log(pos.x), 1000);\n```\n\nRemember that if you set the value as `Ola(10)`, this is really an alias for `Ola({ value: 10 })`, so use the property `.value` to update it:\n\n```js\nheater.value = 25;\nheater.set({ value: 25 });\n```\n\nYou can see in this graph, the blue line is the value that is set though `.set()`, while the red line is the value that reading it returns:\n\n\n \n\n\n### Read the value\n\n```js\nlog(heater.value); // Since the constructor used a number, use `.value`\nlog(motor.angle); // Read as an object property\nlog(position.get(\"x\")); // Find the X value\nlog(heights[1]); // Move the first item to 120\n```\n\nYou can read the value at any time, and the value will be calculated at that moment in time:\n\n```js\nconst pos = Ola({ x: 0 });\npos.set({ x: 100 });\n\nsetInterval(() => {\n // It will update every time it's read\n console.log(pos.x);\n}, 10);\n```\n\nIn contrast to other libraries, there's no need to tick/update the function every N ms or before reading the value, since `Ola()` uses math functions you should just read it when needed.\n\n## Advanced usage\n\nIf you need to access more advanced features, you can read these two properties:\n\n```js\n// All the details about the current transition, please see the source for more info\nlog(heater._value); // { to: 25, from: 20, ... }\nlog(motor._angle); // { to: 90, from: 180, ... }\n\n// The value that will be set when the transition is finished\nlog(heater.$value); // 25\nlog(motor.$angle); // 90\n```\n\n## Features\n\nWhile there are some other great libraries like Tween, this one has some improvements:\n\n### Smooth in realtime\n\nOther libraries don't move smoothly when there's an update **while the previous transition is still ongoing**. Ola makes sure there are no harsh corners:\n\n\n ![](\"https://raw.githubusercontent.com/franciscop/ola/master/docs/smooth_ola.png\") \n | \n \n ![](\"https://raw.githubusercontent.com/franciscop/ola/master/docs/smooth_tweenmax.png\") \n | \n
| \n Smooth interpolation with Ola()\n | \n\n Harsh interpolation with Tweenmax\n | \n