Jump to content
Search Community

Object is not easing when react sprite object referenced

mogwai test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm working on a project using ReactJS with Pixi & GSAP and the js library I'm using is called "react-pixi-fiber".

I'm trying to reference the React Pixi Sprite object and handling the animation it using GSAP. 

However, it changes position without easing, and there's no error message showing.

 

Code as below

 

The "moveEle" function will be called from the parent component.

 

 
class MainObject extends Component {
constructor(props) {
super(props);
this.state = {
   ...
};
this._refEle = React.createRef();

moveEle = options => {

TweenLite.to(this._refEle, options.duration, {
x: options.x,
y: options.y,
ease:Power2.easeOut

}).play();
};

render() {

return (
<Fragment key="MainElesFragment">
<Sprite
ref={div => (this._refEle = div)}
anchor={centerAnchor}
texture={textureUrl}
width={width}
height={height}
x={x}
y={y}
key="thisEle"
/>
</Fragment>
)

}
}
 
 
 
Link to comment
Share on other sites

Welcome to the forums, @mogwai. We'd love to help, but just seeing a snippet of code doesn't really help - we need to see the issue in context. Would you please provide a reduced test case in codepen or stackblitz or something like that? It kinda sounds like maybe you have something else controlling that animation rather than just GSAP (like something is fighting with GSAP)? Totally a guess. You seem to have defined the ease correctly, though I don't see any imports nor do I see if you're correctly loading CSSPlugin (which would be necessary to animate CSS-related properties). 

  • Like 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

It doesn't need the CSSPlugin. It's React for PixiJS.

 

Ha. Yeah, I'm so used to associating React with animating regular DOM elements but you're right - if it's Pixi then no CSSPlugin is needed. 

 

@mogwai can you provide a reduced test case so we can take a peek? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...