tweenjs / tweenjs/tween.js

`Timeline` feature

Open
#647 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Feature
Dominant language
TypeScript
Stars
10.1k
Forks
1.4k
PR merge metrics
No merged PRs in 30d

Description

The Tween class is doing a lot. Maybe it is starting to grow out of scope for what a Tween is. For example, we can chain, yoyo, repeat tweens, etc. Maybe it would be better to have a cleaner separation of concerns and introduce a new Timeline class (maybe convert Group with Timeline) that would be generally more robust for this.

What could this Timeline API looks like? How would Tween play with Timeline? Perhaps Tweens are added to Timelines.

This comment has some ideas: https://github.com/tweenjs/tween.js/issues/560#issuecomment-752838191

Food for thought:

const track1 = new Sequence([
  new Empty(300),
  new Tween(mesh.rotation).to(..., 1000),
  new Tween(mesh.position).delay(500).to(..., 1000),
])

const track2 = new Tween(otherThing).to(2000)

const timeline = new Timeline([ // parallel
  // tracks for the timeline
  track1,
  track2
])

const anim = new Animation([timeline]).start() // start/stop/repeat/etc similar to current Tween perhaps

requestAnimationFrame(function loop() {
  anim.update()
  requestAnimationFrame(loop)
})

const timeline2 = new Timeline([
  timeline, // this timeline
  new Tween(...).to(...), // will play in parallel to this tween
])

const anim2 = new Animation([timeline2])

// etc

Contributor guide

Open the contributing guide

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.

Research direction

Start by reading the current Tween and Group responsibilities, including the existing chain, yoyo, and repeat behavior, then review the ideas in issue #560's linked comment. Compare those responsibilities with the proposed Sequence, Timeline, and Animation examples. Done would require an agreed API and design for how Tweens interact with Timelines, not just an implementation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.