tufik2

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.

Hi ArshadSyed, now there are a new version that support GSAP3, so if you are looking an alternative to ReactNative Animated, this could be a good option. https://www.npmjs.com/package/gsap-rn

Also there is a new version that support GSAP3, so if you are looking an alternative to ReactNative Animated, this could be a good option. https://www.npmjs.com/package/gsap-rn

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

Really all is working well, so I will made some test and report any issue if I have it.

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

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.

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");

Here I leave a repo in GitHub with a React Native demo app and some explanation about how to implement the plugin in your project. The performance using Direct Manipulation is really good, specially when compile our apps in a release version. https://github.com/tufik2/TweenMaxRN Video: https://www.dropbox.com/s/ioghw2t7ua5agpn/video.mp4?dl=0

@OSUblake Yes, I could make a repo the next week in GitHub with a demo and public the link here...

Hello, thank you for your answer. i have created a method that replace the old TimeLine for the New TimeLine with the new tween and move the next tweens to the new position but i have a new problem. I use offsetOrLabel param too and i don't know how get a array with this related values. When i create the new TimeLine the offsetOrLabel param lost. Is possible get the offsetOrLabel info related with the specific tween? Another question when i create a new timeline, add new tweens objects and labels, I can see (firebug: console.log(timelineMax)), a object with all labels added, Would be good have anothers object with all real data of tweens including offsets data, etc. Similar to labels Something so: real_tweens = [{tween:Object, offsetOrLabel :"=-10", etc}, {tween:Object, offsetOrLabel :"labe1", etc}] ------ In resume i'm creating a page with Ajax load content. All with TweenMax transitions (similar to parallax effect). When i be (example) "Works area", i need to load a work description and add this new HTML content to the time line just after the "work" label and move the next transitions example 2 secons after. The only problem that i have to resolve is get all data "offsetsOrLabel " too, and do a correct replica of the old timeLine.