Skip to content

Animation: animates from 0 to 1 in a specific time with a defined acceleration (easing) function

License

Notifications You must be signed in to change notification settings

lemon3/zero2one

Repository files navigation

MIT License LinkedIn


Logo

a small animation helper

Table of Contents
  1. About The Project
  2. Usage
  3. License
  4. Contact

About The Project

I started this project in 2012. Now I have completely rewritten the code.

demo gif

small demo what you can do with zero2one

Features

  • Coded in vanilla JS.
  • easing
  • Zero2One is dependency-free

(back to top)

Usage

Quickstart

in your terminal

yarn add zero2one
# or
npm add zero2one

html element

<div id="demo"></div>

javascript

import Zero2One from "./node_modules/Zero2One/index.js";

const demo = document.getElementById("demo");
if (demo) {
  const z2o = new Zero2One();
  const start = 1900;
  const end = 2023;
  const duration = 2000;
  const delta = end - start;

  z2o.start(duration, 'Quad.easeIn', (propress) => {
    demo.innerText = start + delta * propress << 0;
  });
}

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Wolfgang Jungmayer - lemon3.at

Project Link: https://github.com/lemon3/zero2one

(back to top)

coded with ❤ in vienna
by wolfgang jungmayer

About

Animation: animates from 0 to 1 in a specific time with a defined acceleration (easing) function

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published