Skip to content

Commit

Permalink
examples: fix 14_pause_tween which was trying to use the removed
Browse files Browse the repository at this point in the history
relative values feature (`start('+500')`) and make it use `.delay(500)`
instead, and avoid using negative values for delaye (`.delay(-500)`) in
the 13_relative_start_time example because it may not be intuitive and
plus that feature broke with the previous merge that fixed more
important timing issues (especially with unfocused browser tabs)

BREAKING: If you are using negative values for delay, f.e.
`tween.delay(-500)`, instead manage the time values passed to your
tweens manually. For example:

```js
tweenOffset = 500
const tween = new Tween(...)
tween.start(currentTime)
tween.update(currentTime + tweenOffset) // advance it immediate immediately, as if it already started earlier

// in the update loop
tween.update(newCurrentTime + tweenOffset)
```
  • Loading branch information
trusktr committed Jan 15, 2024
1 parent bb608dd commit df82146
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 5 deletions.
4 changes: 2 additions & 2 deletions examples/13_relative_start_time.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ <h2>13 _ relative start time</h2>

tween2 = new TWEEN.Tween(position2).to({x: 500, y: 300, rotation: -90}, 2000).onUpdate(update2)

tween1.delay(4000).start()
tween2.delay(-500).start()
tween1.delay(2000).start()
tween2.delay(100).start()
}

function animate(time) {
Expand Down
3 changes: 2 additions & 1 deletion examples/14_pause_tween.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ <h2>14 _ pause tween</h2>
.onUpdate(update1)
.yoyo(true)
.repeat(Infinity)
.start('+500')
.delay(500)
.start()
}

function animate(time) {
Expand Down
4 changes: 2 additions & 2 deletions examples/15_complex_properties.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<div id="info">
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
<h2>15 _ complex properties</h2>
<p>Simple example for illustrating the creation and chaining of tweens.</p>
<p>Simple example for illustrating animation of nested properties.</p>
</div>
<div
id="target"
Expand Down Expand Up @@ -38,7 +38,7 @@ <h2>15 _ complex properties</h2>
position = {x: 100, y: 100, styles: {opacity: 1.0}}
target = document.getElementById('target')
tween = new TWEEN.Tween(position)
.to({x: 700, y: 200, styles: {opacity: 0.5}}, 1000)
.to({x: 700, y: 200, styles: {opacity: 0}}, 1000)
.delay(1000)
.onUpdate(update)

Expand Down

0 comments on commit df82146

Please sign in to comment.