Jump to content

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

GSAP on React Native question

Recommended Posts

Hey all,


Long time GSAP user, I've been integrating it into out web games at work and place loves the animations with it, but now I'm tasked to animate for a game of theirs on React Native. I tried to bring it in using tweenmaxRN 



But I get odd bugs and I wanted to ask is there a current tool to bridge GSAP with react NATIVE?


The bugs I'm getting is things flashing or if I'm animating 

.to(el, 1 , {transform:{translateX:100}},0)


But then I put eg a rotation tween in for the same el at 0.5 it snaps the rotation in. And other bugs when I overlap. Is there a recent git anyone's made for native by chance? :)


sorry for code typos,  I'm writing this on my commute home after work hoping there is something I'm missing before I go back to work and try to create a system by the next game deadline.


thank you!

Link to comment
Share on other sites

That TweenMaxRN is the only thing I've seen for React Native.


Do overlaps always cause an issue? I'm no expert on plugins. Maybe @GreenSock can quickly look at those plugins to see if anything stands out. 





Link to comment
Share on other sites

Thanks Blake! Yeah if there are overlaps the new one tends to kick in immediately or sometimes neither play.  This happened for translate and scales, rotations tweens dont animate at all but do snap to the angle. But I think I can fix that, maybe i havent predefined them properly.  I can post the video of the translation and scale issue tommorow.



Link to comment
Share on other sites

5 hours ago, OSUblake said:

Maybe @GreenSock can quickly look at those plugins to see if anything stands out. 


Yeah, I suspect it could be an overwrite thing or (more likely) mishandling of transforms. We had to do a bunch of work to ensure that all the transform components can be independently animated, plus a whole bunch of other transform-specific challenges. See https://greensock.com/transforms for details. I don't see them handling all that stuff in the "transform" plugin they created, but I'm not very familiar with exactly what they're doing, what constraints there are with native, etc. 


I must admit it feels a little weird to be spending time troubleshooting a 3rd party plugin that's "borrowing" GSAP's API/code (ineffectively). ?

Link to comment
Share on other sites

They kind of have to come up with their own transform solution because React Native does not work with actual HTML/CSS. It uses JavaScript to control views of actual native applications i.e. iOS and Android, so there is nothing like getComputedStyle.  



I was just thinking that there might have been an overwrite issue with the way the plugins are written. I remember a 3rd party Pixi plugin having the same issues that Luckyde described.


My next guess for the issue would be that the .setNativeProps() calls are overwriting the style/transform objects. But that's just a guess. I've never used React Native.




Link to comment
Share on other sites

Thanks @OSUblake and @GreenSock! Yeah normally I wouldn't use a third party plugin but as Blake mentioned it doesn't behave the same s actual css, using the https://greensock.com/react translating x and y on native doesn't do anything, it just wouldn't work without the plugin. If there's any other way to do it vanilla it would be amazing.

Here is another example where it works if I animate individual sides but if I split x and y it throws me an error


 I got Zynga to pay for a business green with 20 users licenses and I'm trying really hard to put them to use and teach other people here to use GSAP so the more games I can put this on the better! :D

Link to comment
Share on other sites

First of all, thanks for being an advocate for GreenSock at Zynga! ?


And yes, I'm pretty sure that it's an overwrite issue. Try setting overwrite:false on your tween(s) or you could just set TweenLite.defaultOverwrite = false. 


The plugin you're using doesn't look like it handles the overwrites properly. So every "transform" tween, when it renders for the first time, will kill any other "transform" tweens that are running at that time. See what I mean? 

Link to comment
Share on other sites

No problems!

I tried setting the overwrite... overwrite but the problem still seems to be there, i also tried double setting in the begging to be sure that the properties are set




I tried setting it to "none" too or having all of the tweens to have overwrite:false with no luck 

But it still does this bug, as soon as you introduce a second thing to animate it says its value is not a number/freezes

Any ideas would be really really appreciated thank you!

Link to comment
Share on other sites

13 hours ago, OSUblake said:

My next guess for the issue would be that the .setNativeProps() calls are overwriting the style/transform objects. But that's just a guess. I've never used React Native.


I think @OSUblake is right. Let's say your first tween is controlling translateX, but then you create another (overlapping one) for translateY. They're BOTH funneled through that 3rd-party "transform" plugin which only looks at the values passed into it. So while they're overlapping, the first tween will set the transform to the translateX value, and then right after that (on the same tick), the second tween will set the transform to translateY. So the translateX gets wiped out, replaced with just the translateY. 


See the issue? 


The plugin would need to take a more wholistic approach. In GSAP, we treat the _gsTransform object as a proxy of sorts, where each component (x, y, scaleX, scaleY, rotation, etc.) is stored/edited and then when a tween renders it pulls from that common object. I'd suggest that the 3rd party plugin could do something like that. 

Link to comment
Share on other sites

I can see how that would be an issue, does this effect animations not on the same tick too? In the last example I purposely set scale to enter at 3 seconds in, long past when the translate tween stops being active and it still broke the game. Surely the transform object would be a static at that point with all of its keys.. I'll reach out to the dev of the tool hopefully theres a workaround i'm just not as smart as to create my own conversion tool from GSAP to the object.state way of doing it that native seems to do. 

Link to comment
Share on other sites

Yeah, it looks like whoever made that plugin didn't account for multiple transform-related tweens (even if they're not overlapping). 


If you need some consulting help building something (plugin), feel free to reach out to me privately and we can try to figure something out. 

Link to comment
Share on other sites

 Hi everyone's, that plugin was based in another plugin that only modifies the state in RN, Today I was checking more in detail the code and compare the GSAP specification and rewrite a lot of stuff. Thanks to @Luckydefor testing and helps to debug this library.


Some testing made with the last version (0.0.3), look much more stable.
File with the test: src/components/Test.js


let tl = new TimelineMax();
    tl.set(this.refs.box, {transform:{translateX:10, translateY:10, scale:1}, style:{backgroundColor:"#F00"} });
    tl.to(this.refs.box, 6, {transform:{translateY:300, scale:2}}, 0);
    tl.to(this.refs.box, 1, {transform:{translateX:200, rotate:"50deg"}}, 1);
    tl.to(this.refs.box, 1, {transform:{translateX:300}}, 2);
    tl.to(this.refs.box, 2, {transform:{scale:1}});
    tl.to(this.refs.box, 2, {transform:{rotate:"10deg"}, style:{backgroundColor:"#FFF"} });
    tl.fromTo(this.refs.box, 4, {transform:{translateX:0}}, {transform:{translateX:200}});
    tl.fromTo(this.refs.box, 4, {transform:{translateY:0}}, {transform:{translateY:200}}, "=-4");
    tl.to(this.refs.box, 2, {transform:{rotate:"0deg"}});

let t2 = new TimelineMax();
    t2.set(this.refs.box2, {style:{left:0, top:0, backgroundColor:"#FF0", alpha:1}});
    t2.to(this.refs.box2, 4, {style:{top:400}}, 0);
    t2.to(this.refs.box2, 1, {style:{left:200, alpha:0.5}}, 1);
    t2.to(this.refs.box2, 1, {style:{left:100}}, 2);
    t2.to(this.refs.box2, 1, {style:{top:50, backgroundColor:"#0FF", alpha:1}});
    t2.fromTo(this.refs.box2, 4, {style:{left:0}}, {style:{left:100}, delay:1});
    t2.fromTo(this.refs.box2, 4, {style:{top:0}}, {style:{top:100}}, "=-4");



  • Like 2
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.