Jump to content


  • Posts

  • Joined

  • Last visited

About tufik2

  • Birthday 03/01/1985

Profile Information

  • Gender
  • Location

Contact Methods

  • Skype

Recent Profile Visitors

694 profile views

tufik2's Achievements


Newbie (1/14)



  1. 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");
  2. 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
  3. @OSUblake Yes, I could make a repo the next week in GitHub with a demo and public the link here...
  4. 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.