I’m not a huge fan of most of the JS tweening toolkits out there – most are pretty basic, or cater only to straight CSS tweens… Lately, I’ve found myself wanting to react to a position in a tween, based on time and easing, so I can execute my own logic, rather than just tweening some property from where it is now to a destination position. For example, when tweening paragraphs of text in or out, or when showing/hiding large numbers of targets, or using an object where updating properties doesn’t do anything, and method calls are required (e.g., someObject.setSomevalue(value)).

I’d been using a pretty quickly structured frame-based tween – basically just an array of weighed values, and would move the pointer back and forth during setInterval ticks – but this had some limits that needed addressing (increasing duration, scaling time for fast-forward, etc), so after a few days of wrestling with a conversion from frame-based to time-based logic, I’ve released ProtoTween. It’s still in it’s alpha, has no docs or examples and limited comments, but it’s up and seems to hold up really well against any scenario I could imagine. I used an event dispatcher model, where the event has several properties including a ‘progress’ – which is a value between 1 and 0, weighted by an easing function. This property is enough to handle most requirements (target.property = change * e.progress), but others are available as well. Events are dispatched during, before and after each update, during start and complete, at either terminus, etc.

As always, it’s framework-agnostic and can be used with any toolkit or library.

I’ve got a quick-n-dirty POC that I’ll try to add this week.

Feel free to check it out on git: https://github.com/moagrius/ProtoTween