Can't get Tween working in React

[Kyle McCaf]

I'm working on trying to get Tween working with the ReactFlow library: https://github.com/wbkd/react-flow

However, Tween just doesn't seem to want to run.

As a very basic test I am running:

import TWEEN from '@tweenjs/tween.js';
------------------------------------

const startTween = {
  x: 0,
  y: 0
};

const endTween = {
  x: 300,
  y: 300
};

var test = 0;

new TWEEN.Tween(startTween)
  .to(endTween, 1000)
  .easing(TWEEN.Easing.Quadratic.Out)
  .onUpdate(({x}) => {
    test = x;
    console.log('onUpdate: ' + x);
  })
  .start();

console.log('Test:' + test);

When this is run, the only value logged to console is Test: 0. Nothing from onUpdate is run. I have also tried using onStart and onComplete to assign the value of var test, but the result is the same for all. Tween just doesn't appear to run.

Any advice on what I'm doing wrong?

[Faith]

have you tried to use RAF to trigger tween.update() ?

[Kyle McCaf]

have you tried to use RAF to trigger tween.update() ?

Sorry, but I am going to need some elaboration on what RAF is and how to use it. I am not very experienced with the library (especially since I can't get a basic hello world working)

[Thomas CASTELLY]

have you tried to use RAF to trigger tween.update() ?

Sorry, but I am going to need some elaboration on what RAF is and how to use it. I am not very experienced with the library (especially since I can't get a basic hello world working)

Hello,

I've something working in React like this.

TweenCmp.tsx

import { useEffect, useState } from 'react';
import TWEEN, { Tween } from '@tweenjs/tween.js';

const TweenCmp = function () {
  const [coords, setCoords] = useState({ x: 0, y: 0 });

  useEffect(() => {
    let requestAnimationId = 0;
    const _coords = {
      x: coords.x,
      y: coords.y,
    };

    new Tween(_coords) // Create a new tween that modifies 'coords'.
      .to({ x: 300, y: 200 }, 1000) // Move to (300, 200) in 1 second.
      .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
      .onUpdate(({ x, y }) => {
        setCoords({ x, y });
      })
      .onComplete(() => {
        cancelAnimationFrame(requestAnimationId);
      })
      .start();  // Start the tween immediately.

    const animate = (time: number) => {
      requestAnimationId = requestAnimationFrame(animate);
      TWEEN.update(time);
    };
    requestAnimationId = requestAnimationFrame(animate);

    return () => {
      cancelAnimationFrame(requestAnimationId);
    };
  }, []);

  return (
    <span>[ {coords.x} ; {coords.y} ]</span>
  );
};

export default TweenCmp;

[KiwiCoder]

Bump for this thread.

I am also running into this issue. The old deprecated Tween library seems to work fine.
What's happening @trusktr @sole @MasatoMakino

[sole]

@InfamousStarFox -- @july-12 is suggesting you use requestAnimationFrame to get Tween to execute. There are examples in the documentation that demonstrate how to do this. It's also on the readme https://github.com/tweenjs/tween.js#readme

@kevinvugts - so...

1. I am not working on this library at the moment, and I haven't in a while. It's extremely rude to tag people just like that out of the blue, so please don't do that - the maintainers owe you nothing.
2. Bumping a thread without adding any information as to what you tried and didn't work, without providing a live example or something of that sort is not going to get you any closer to a solution.
3. Maybe try making an effort?

[Kyle McCaf]

I ended up using Popmotion in my project instead, so I'll close this issue.

If someone else has the same problem, please open a fresh issue.

[KiwiCoder]

• Bumping a thread without adding any information as to what you tried and didn't work, without providing a live example or something of that sort is not going to get you any closer to a solution.

It was no where close to my intention for getting rude to "the maintainers" @sole
I am sorry if it felt that way.

Anyhow, could we share a live codepen so it would provide more context to this issue?
I agree I should have shared this before bumping this thread.

I am looking forward for your response. ;)

[Joe Pea]

I'm sorry for the late reply everyone!

@InfamousStarFox Hello. Tween.js requires you to write your own animation loop. People use the term "raf" as a nickname for [requestAnimationFrame], an API built into browser for creating animation loops.

(Last I checked) An upside of Popmotion is that it automatically creates an animation loop for you. The upside of Tween.js is that it does not automatically create a loop for you, making it easier to integrate into existing projects that have their own loop so that you don't end up with multiple loops and off-by-one-frame visual errors.

Welcome to the world of animation. 😃

@kevinvugts

The old deprecated Tween library seems to work fine.

Without a reproduction, no idea what is broken or if your code is doing something wrong or something else. I expect at least you have your own animation loop as I described for InfamousStarFox. If despite this Tween isn't working, there may be an issue, but we'd need a code sample...

---

(@everyone: All this has absolutely nothing to do with React)

[Joe Pea]

@InfamousStarFox @kevinvugts Btw, for help or discussion, please open a thread in the Discussions tab, and use issues for bugs, improvements, or feature requests.