Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mogwai

Object is not easing when react sprite object referenced

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 post
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 post
Share on other sites

It doesn't need the CSSPlugin. It's React for PixiJS. I've seen demos of it working fine on CodePen, but I'm on my phone so I'm notg oing to search for them right now.

Link to post
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 post
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.

×