Animations through JavaScript functions
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
combine
compose
css
functions
maths
measure
progress
scale
timing
.gitignore
LICENSE.md
README.md
package.json

README.md

tinymation

Animations through JavaScript functions

The aim of this library is to provide modular functions that you can compose to create JavaScript animations. This would allow to embed only the features you need in the JS your users have to download. Which hopefully in turn would translate to smaller download size compared to libraries providing all their options through an OOP api (to be verified once things get more stable).


This library is currently in a really early stage. There's still a lot to define. Feel free to comment on the issues/raise new ones to help shape it, contribute code, or even point to existing art that would make it redundant ;)


General idea

The general concept is to break down the animation into two parts:

  • a function to use as source of progress (time as a base, but could also be scroll,...)
  • another that interpolates this progress into updates of the UI
// Fades in the `.target` element over 1000ms
time(1000)(fadeIn(document.querySelector('.target')));

More details about this this article

Building through composition

Each bit could be expressed through compositions of functions, allowing to create complex animations with calls like:

var el = document.querySelector('.target');
// Fades in the element in between the scroll positions where its top reaches 33 and 66% of the viewport
between([0.33, 0.66],percentOf(viewportHeight, distance(topOf(el), bottomOfViewport)))(fadeIn(el));
// Simultaneously fades in and translate the element of `50vw` over 1000ms
time(1000)(parallel([
  fadeIn(el),
  translateX(50,'vw',el)
]);

More details about the first call in this article and about the second in this one