Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Animation prototype

Open
  • Is something wrong?
#3 44 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

Assessment

This issue has not been assessed yet.

Description

type:epic

Looking into a prototype for general animation (as noted by https://github.com/phetsims/joist/issues/404).

I've checked in some code that is not refined or final by any means.

Some thoughts/opinions:

  1. We'll want to attach animations to Properties (handling numbers/vectors or possibly other things), object properties (like linkAttribute), or handle with callbacks.
  2. the first.blend( second, ratio ) function (like Vector2/etc. has) sounds like a good default candidate for interpolating between non-numbers.
  3. Have an Animator that tracks (and steps) multiple animations, removing animations as necessary when they are complete. We may want to just call step() once without having to manually track ephemeral animations (but still want the flexibility to manually reference and step animations themselves).
  4. Prototype should be able to handle animating colors (with blending functions), opacity, translations, rotation, etc.
  5. Step function on animations should return how much time has elapsed since the animation would have ended, so that chained animations can function properly (queueing one animation right after another)
  6. "Stacking" easing animations sounds like the most useful way to handle starting one easing before ending another. Ease animations should animate (possibly with deltas) from "where our existing animations will take us" to the "animation target". Thus multiple easing animations running currently should result in a nice visual behavior (with speed-ups for cases where someone clicks rapidly through a carousel, etc.)
  7. Easing duration could also be computed instead by a maximum speed allowed for the particular easing. I already have the polynomial (linear/quadratic/cubic/etc.) easing curves and the two derivatives implemented, so it's fairly trivial to compute maximum speed.
  8. Spline/keyframe based animation (it's not simple easing) and damped motion should both be considered, as they have their somewhat separate uses. See what can be integrated in all of them.
// possible examples for easing -- potentially auto-starting
animator.ease( locationProperty, targetProperty, {
  easing: Easing.CUBIC_IN_OUT,
  duration: 1.5
} ).start(); // Do we need a start(), or can it be implicit? May need for chaining
animator.ease( node, 'opacity', targetOpacity, { duration: 0.5 } );
animator.ease( currentValue, targetValue, function( value ) { ... }, { duration: ... } );
animator.step( dt );

var animation = animator.ease( ... );
animation.stop();
// ...
animation.restart();

animation.chain( animator.ease( ... ) ); // After one is done, start another
Dominant language
TypeScript
Stars
2
Forks
8
No merged PRs in 30d

Getting set up

We have not checked this project's setup files yet. Start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from phetsims/twixt

All issues in phetsims/twixt

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.