onestopjs

by Martin Koparanov

0%

Orchestra

timeline-orchestration


Small package to help with orchestrating complex sequences.
It aims to do so by leveraging the mental model of placing keyframes on a timeline.

Take a look at the example.

Check it out on GitHub/npm.

What this is not

This package does not do any animations. It simply provides the values for your predefined sequence at any point. If you want to do animations, you must couple this package with any other animation solution. This library simply provides the orchestration.

The timeline part comes from the mental model which this package leverages - placing keyframes on a timeline.

Mental model

As mentioned, this package mimics the logic of placing keyframes on an animation timeline - you set a keyframe at a specific time and value. You do this for every key point of your animation. Then, the animation software takes over and interpolates between all of your keyframes.

Imagine it like that:

Timeline example

This is what this package does, except you can use it for whatever you want, not just literally running animations. When defining "keyframes", you will use the word "time", which is not necessarily correct, but it helps follow the model.

Use case

Why is this any better than any other animation library out there? Well, it's not. In fact, this is not an animation library. This is the point, you can break out of the dependency of having to literally run animations if you want to orchestrate any sequence of events, based on a value.

Imagine you have multiple elements, which have to go to different positions, based on how far you have scrolled. Using this package, you will define all the key positions for all the elements, based on the scroll package. In fact, this is the use case out of which this package was born.

Using any animation library, the element's position would depend on the time since the animation started. However, using this package, the element's position would depend on any value you want, e.g. scroll position.