Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by axe-z

  1. axe-z

    React and GSAP

    I think I have cracked it, I do not see any issues right now... using both <TransitionGroup> and <Transition> with GSAP , based on the code you gave me , made it simpler and faster. Without the FIXED position that was problematic since you cannot scroll . if you ever need it, just give me a shout. My english is not good enough to publish.
  2. axe-z

    React and GSAP

    Hi Rodrigo, I'm wondering , that react-router example you've linked, where did you find that, is there any documentation ? there is some stuff i'm facing using the concept, wished I could understand a bit more.
  3. axe-z

    React and GSAP

    Thanks, I'll try and fix this, the React router one I have not tried yet, look complicated for what could be so much simpler. If only facebook gave a .... about animation and had proper lifecycles for us.
  4. axe-z

    React and GSAP

    Does not work anymore... Issues when using routers, animation not waiting before the component is out, it looks cheap. Really bummed out about this. I ll have to go with lesser js animation apis. if only it could work with specific component lifecycles like : componentWillAppear / componentWillLeave
  5. axe-z

    React and GSAP

    All the exemples are driving me nuts, been reading for 12 hours, and i'm still nowhere to getting this to work, the previous exemple does not work with react V16 , and IT needs react-transition-group but it has changed too, anyone with a solution ?? React is not a small player , this should be somewhere here in the docs.
  6. RomanHoefner you are totally right, I was using handbreak, and I had issues like that , changed to a properly compressed file and everything is ok now.
  7. Im sorry to everyone that helped me, the problem for performance was mainly because of the compression software I use ... ( handbreak) ... What software do you use ?? I do not like to use online solution ... Handbreak is very good to acheive amazing result, and my license for Adobe media encoder is over and done..
  8. There is hope !!!! var start = null; var video = $("video").get(0); video.addEventListener('loadedmetadata', function() { console.log(video.duration); }); function frames(timestamp) { var progress; if (start === null) start = timestamp; progress = timestamp - start; video.currentTime = video.currentTime += 0.03; if (progress < 5965) { requestAnimationFrame(frames); } } requestAnimationFrame(frames);
  9. I have better results with video.playbackRate = -1.0; but this does not work with chrome.... ( it is NOT supported) , and setinterval with video.currentTime = +=0.1. I am a newb only with gsap. Thanks for all your help. this forum is full of great helping people. wow. this helps me with the hurt. . It seems I can not live without the canvas.
  10. I did that (preloaded / settimeouts.., reducing my hd files to 140k) , and I'm working with a local file on a crasy fast ssd. .
  11. My real problem is not with chrome anymore. but thanks ! I did understand an know all of this. I should have said before. It is just not fluid at all. On chrome, safari , ff, etc...
  12. With everything you can do with three,js and here with gsap, it is very painfull to understand that you can not do this simple thing ( without major frames skipping ) .
  13. I do know about that , but mp4 should be working with chrome, it does, if no action is set . anyways, performance when rewinding is really really poor, skipping a bunch of frames. Thought about going with a setinterval, each 24, by animating the .playbackRate , as it is supposed to work, again , big fail. very frustrated right now .. I use to do this in flash around 6 years ago, when h264 came out.
  14. It works in ff, and safari, did not try opera. I have no plugins for chrome, and the last version ... well I had a sniffer for gsap, but once removed, it still does not work on my end .. weird. on mac that is. I guess that is my problem, but I noticed console.log(video.duration) == NaN ...console.dir(video) . if I scroll down to duration, I see a number.. This happens only on chrome. Obvioulsly the demo on codepen is not what i'm trying to do, h264 is SO good for compression, wished we could use it more. Performance is really poor on bigger video files. If only we could use video files with performance and ease. We could do so dawm much more... sorry for my poor english. Thanks for your help, you guys are great. Make the web go beyond.
  15. Thanks, but your pen, like mine, does not work in chrome that's weird.. any other way you think?? thanks for everything, nicely done for the time duration, I had an other solution, but yours is better.
  16. thank you for your responses, is there a way for me to get notifications, when I get replies here ?
  17. I get an error on your http://codepen.io/os...18d?editors=001 but given the pen I have pushed to make things clearer, I ve been on this for days..
  18. well I 've made this pen http://codepen.io/axe-z/pen/RoGOgB?editors=1111 thing is , it does not work on chrome ... it does in safari and ff... I do not understand ... I need to be able do do this...
  19. I've have red almost everything on the net and over here about animation video, but can not get anything working... How do I let say on $(window).on('click', function(){ // play.forward.... }); and dblclick, playinReverse... I've tried so many things... these did not help. http://greensock.com/forums/topic/12771-animating-the-playhead-of-video-element-is-it-possible/?hl=ahrengot#entry53668 http://greensock.com/forums/topic/13719-tweening-video-frames/?hl=video+control
  20. It does, but I strongly think it should not work this way... you might want to use $this.position().left to get the proper values. $ is smarth enough to get the right start number without this offset. Also a great plugin suggestion would be an svg filter one. Thanks anyway
  21. Hi, I figured how to do it, But I Cannot understand the real logic behind it. if I ask a centered div to move X by 250px, then the next animation one by the same distance. they should end up a 500px ... with equal mouvement right ? .. I've made a simple codepen. I need to understand, even things this simple !
  22. I have found it !!! hahaha, I gave my self the answer, onReverseComplete exists ! great !! Still I have tried so many thing I thought should work and did not. I have ajusted the codepen.
  23. Thanks , but that s not it , there is an other event ( DBLCLICK) that reverse the click event. Still I do not know how to stop it ( the hover animation ) there. And restart it, only back at the position at the very start. I did make it to your point, but could not find a way , to restar the hover at the right moment, ive tried if ( tl.reversed()) { flag= true }, did not work, I do not know why. It would be ease if we could say tl.stop() , when tl2.play(), but that does not work either, and the docs did not give an answer on that. The answer might be super simple, but being a beginner.... Or maybe a onReverseComplete put the flag back to true, but it does not seem there is such a method. Men I need help, impossible that this is not possible. HELP ANYONE , I am going mad over this, every time I think I got it it does not work!! Nice start !
  24. I'm a newbie, I did read the docs, but could not find an answer that fitted, or at least did not understand correctly apparently. I do not undestand why I can not control the first TL, while animating the second one. I 've tried almost every thing, been on this for two days, 7 hairs left, please help me obi wan, you are my only hope. Also, am I in the right direction at all ?
  25. Thanks, I was hoping that tweens could be killed() or at least stoped?, there are several method in the docs, I really do not understand why it does not work, As for the kill methods, I have not seen any demos or explanations that fitted a timeline situation. Your codepen is not dooing what I hopped and explained , first, it's stuck on the hover result, then the hover is back if you dlbclick. So there is no way, to kill tweens if its on the same selection? Removing listeners will create issues . Well, i ll try to find a way around this. thanks again.