Jump to content
Search Community

GSAP on React Native question

Luckyde 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

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 

https://github.com/tufik2/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

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.  

https://facebook.github.io/react-native/docs/transforms

 

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.

https://facebook.github.io/react-native/docs/direct-manipulation

 

 

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

http://www.luckyde.com/bugA.mp4


 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

video:

http://luckyde.com/bugB_1.mp4

 

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
  • Thanks 1
Link to comment
Share on other sites

  • 9 months later...

Hi GSAP, I am trying to give support of GSAP 3 in ReactNative due but when I import the library it show me a lot error related with _doc.documentElement, is possible validate if _doc is not available prevent the error? Really I will like to support the new GSAP features due ReactNative have a very poor libraries to animate.

Link to comment
Share on other sites

Hey @tufik2. GSAP isn't build to support React Native, hence the need for a third party library that replaces parts of it like this thread talks about.

 

I'm guessing that the specific error that you're getting might be fixed by importing GSAP's core without the CSSPlugin? You should be able to do that by using import gsap from "gsap/gsap-core"; instead. It very well may throw a different error at you though :) 

Link to comment
Share on other sites

Hi, thanks for the quick answer, yes my first implementation was integrate only using gsap/gsap-core, but there are important features included in CSSPlugin that is not supported in gsap-core, like tweens colors example: bakgroundColor:"#FF000",,,,

 

The integration with gsap 2.1.3 always worked well including CSSPlugin, but after gsap3 CSSPlugin start giving issues if there is not document or window object specified, will be good if you can control that exceptions in futures releases like before, I don't know the differences between v2 and v3 in that scenario and I really want to give support this awesome library in ReactNative, ReactNative don't have any library like this to animate elements, really good Job guys...

Link to comment
Share on other sites

So is there a document.documentElement at some point in React Native? Perhaps it just isn't available initially in which case you could load the GSAP core and import CSSPlugin separately, but wait to register it until the runtime is ready (before your code gets executed)...

 

import { gsap } from "gsap/gsap-core";
import { CSSPlugin } from "gsap/CSSPlugin";

// then later, where your code is...
gsap.registerPlugin(CSSPlugin); 

gsap.to(".class", {backgroundColor: "purple"});

Does that work for you? Obviously I'm not familiar with React Native - sorry. 

Link to comment
Share on other sites

  • 2 weeks later...
44 minutes ago, tufik2 said:

OK, Thanks for your help, here I finish the implementation that support GSAP3 in ReactNative, I hope people looking for better library than RN Animated found this implementation useful.

 https://www.npmjs.com/package/gsap-rn

 

Yeah we ended up using that library for words with friends when i tried to implement gsap into react native however implementing the premium plugins in it was a bit of a nightmare and i could never get it fully there. Also ther were some weird glitches with it, and performance wise it wasnt much  faster than react native animations which sadly is why in the end they wouldnt let me go forward with it :( for basic ux animations tho its a great solutions

  • Like 1
Link to comment
Share on other sites

Thanks Luckyde for your feedback, but in theory the performance should be the same, according with the documentation both use Direct Manipulation to modify elements without re-render... Also you comment encourages me to create an app for android with some examples and performance comparative, of course GSAP and RN Animated are not the solution in all cases, for example, if animation is really complex Lottie is good solution to use with predefined animations.

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...