@wbe/interpol@0.31.4

Patch Changes

• 4bdb69e: Fix: callbacks with position 0 should be fired properly on replay

  This PR fix two unexpected behaviours:

  • Callbacks with position 0 should be fired properly on replay and play → stop → play
  • Timeline with nested timeline should reset their nested timeline position on stop

const tl = new Timeline()

tl.add(() => {
  // was not fired properly on replay and play → stop → play
  console.log("Fired on position 0")
})

tl.add({
  // ...
})

// Replay during play
tl.play()
setTimeout(() => {
  tl.play()
}, 50)

// play → stop → play
tl.play()
setTimeout(() => {
  tl.stop()
  tl.play()
}, 50)

Internal Changes

• When resetting timelines on play/replay, we now check if the child timeline is already at the target position before resetting it. This prevents unnecessary resets and preserves computed-from values on first play.
• Internal Timeline reset logic has been refactored to ensure that children timelines are properly reset to their initial state
• Tests have been added to verify that nested timelines are reset properly on play/replay and that callbacks at position 0 are fired correctly.

@wbe/interpol@0.31.3

Patch Changes

• 7e5a5d2: Prevent add progress from exceeding their range
  • Prevent add progress from exceeding their range
  • Rename reverseLoop by iterateAddsBackward
  • Update bundle size limit to 3.6KB
  • Rework timeline examples

@wbe/interpol@0.31.2

Patch Changes

• b25efdf: Fix two Timeline bugs affecting real RAF playback
  • When round() snaps #progress to 1 slightly before #time reaches #tlDuration (ex: 999.8ms of 1000ms). onComplete could be never triggered.
  • #lastTlProgress and #reverseLoop were never reset in reverse() or play()

@wbe/interpol@0.31.1

Patch Changes

• 56014ff: add timeline meta property

  Add timeline meta property to get the same struct than Interpol instance.

  new Timeline({
    meta: { foo: "bar" },
  })

  This allows to get meta from an "add.instance" without TypeScript cast issue (because instance refer to Timeline or Interpol since the last release).

  ex:

  const tl = new Timeline()
  tl.add(new Timeline({ meta: {...} }))
  tl.add(new Interpol({ meta: {...} }))
  tl.adds[0].instance.meta // valid, it can be meta from Timeline or Interpol instance here.

@wbe/interpol@0.31.0

Minor Changes

• 49cf794: # Nested timelines support

  This branch implements full nested timelines support, allowing Timeline.add() to accept a Timeline instance in addition to Interpol and callbacks. We can now use ulimited nested timelines/interpols to create complex and flexibles animations by timeline chunks!

  timelines-nested-2904x1782.mp4

  const tl1 = new Timeline()
  tl1.add({ x: 500 })
  
  const tl2 = new Timeline()
  tl2.add({ y: 100 })
  
  // Add All to a parent timeline
  const main = new Timeline()
  main.add(tl1)
  main.add(tl2, "-=100")
  
  // start the whole sequence
  main.play()

  We can imagine some others complex structures like this one:

  Timeline (main)
  │
  ├── Timeline (tl1)
  │ ├── Interpol { x: 500 }
  │ └── Timeline (tl1-1)
  │     └── Interpol { x: [...] }
  │     └── Interpol { x: [...] }
  │     └── Timeline (tl1-2)
  │         └── Interpol { x: [...] }
  │         └── Interpol { x: [...] }
  │
  ├── Timeline (tl2)
  │ └── Interpol { x: [...] }
  │
  ├── Interpol { opacity: [...] }
  └── Timeline (tl3)
    └── Interpol { y: [...] }
  

  Changes

  • (BREAKING CHANGE) timeline.add.itp has been renamed to timeline.add.instance because it can now be an Interpol or a Timeline instance.
  • Removed Timeline adds console log when new Timeline({ debug: true }) is used — adds still accessible via console.log(tl.adds) if needed

  Internal changes

  • inTl flag and ticker reference are recursively propagated to all children (including Timeline children of Timeline children)
  • suppressTlEvents parameter added to #updateAdds() to correctly fire nested Timeline onComplete() callbacks during live playback

  Tests

  • Unit tests are available in Timeline.nested.test.ts
  • Visual example added: examples/timeline-nested/ demonstrates real-world nested timeline animation

@wbe/interpol@0.30.0

Minor Changes

• 56bf407: Improve performances

  Breaking changes

  • Remove beforeStart method witch can be replaced by simple code before the instance.
  • Remove deprecated refreshComputedValues in Timeline and Interpol

  Improvements

  Code Organization & Structure

  • Remove duplicated logic in Timeline play
  • Internalize events inside the Ticker class
  • Inline all closures from onEachProps & onAllAdds

  Optimization

  • Optimize styles function using for loop instead of regex
  • Use a for loop in the raf method
  • Cache Object.keys / Object.values results in refresh to reduce allocations
  • Rewrite chooseEase and create EASE_MAP outside easeAdapter to avoid recreation on each call
  • Remove async from handleTick methods
  • Replace setTimeout with queueMicrotask in Ticker and Timeline.add

  Debug

  • Guard debug log: only build the log object when debug is enabled
  • Prevent unnecessary promise creation when Interpol is instantiated from Timeline

@wbe/interpol@0.29.0

Breaking Changes

• 3d5589c: Access to some global properties via engine object:

  before:

  import { InterpolOptions } from "@wbe/interpol"
  
  InterpolOptions.ticker.add(() => {})

  after:

  import { engine } from "@wbe/interpol"
  
  engine.ticker.add(() => {})

@wbe/interpol@0.28.0

Minor Changes

• ded0ac0: Array prop value accepts keyframes 🎉

  before:

  const itp = new Interpol({
    // Array prop value was limited to [from, to]
    x: [0, -100],
    duration: 1000,
    onUpdate: ({ scale, x }) => {
      // ...
    },
  })

  after:

  const itp = new Interpol({
    // Array prop value can now accept multiples keyframes
    x: [0, -100, 100, -50, 50, -25, 25, 0],
    duration: 1000,
    onUpdate: ({ scale, x }) => {
      // ...
    },
  })

  In this example, the x prop will animate through the values in the array, across the duration of the animation. The progress will be divided into equal segments based on the number of keyframes, and the value will interpolate between each segment accordingly.

  This allows to create more complex animations with multiple segments without having to create multiple Interpol.

@wbe/interpol@0.27.1

Patch Changes

• de50ee8: Repo management
  • Separate utils & core
  • Move all the packages/interpol/src in root src
  • Remove turbo. Use pnpm --parallel instead for start examples
  • Add licence file

@wbe/interpol@0.27.0

Minor Changes

• 6d33c38: Rename refreshComputedValues() to refresh()

  refreshComputedValues() is deprecated. Use refresh() instead.

  before:

  const itp = new Interpol({ ... })
  itp.refreshComputedValues()
  
  const tl = new Timeline({ ... })
  tl.refreshComputedValues()

  after:

  const itp = new Interpol({ ... })
  itp.refresh()
  
  const tl = new Timeline({ ... })
  tl.refresh()