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

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

 

 

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

[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 

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

[Animating the playhead of <video> element. Is it possible?]

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

[Trying to play with .mp4 file currentTime, to forward or reverse]

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

[Trying to play with .mp4 file currentTime, to forward or reverse]

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

[Trying to play with .mp4 file currentTime, to forward or reverse]

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.

[Trying to play with .mp4 file currentTime, to forward or reverse]

I did that (preloaded / settimeouts.., reducing my hd files to 140k) , and I'm working with a local file on a crasy fast ssd. . 

[Trying to play with .mp4 file currentTime, to forward or reverse]

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

[Trying to play with .mp4 file currentTime, to forward or reverse]

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

[Trying to play with .mp4 file currentTime, to forward or reverse]

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. 

[Trying to play with .mp4 file currentTime, to forward or reverse]

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. 

[Trying to play with .mp4 file currentTime, to forward or reverse]

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. 

[Trying to play with .mp4 file currentTime, to forward or reverse]

thank you for your responses, is there a way for me to get notifications, when I get replies here ? 

[Trying to play with .mp4 file currentTime, to forward or reverse]

I get an error on your 

See the Pen 5f281c8a0e68cbd710de4a3b11ddd18d?editors=001 by osublake (@osublake) on CodePen

 

 

but given the pen I have pushed to make things clearer, I ve been on this for days.. 

[Trying to play with .mp4 file currentTime, to forward or reverse]

well I 've made this pen 

See the Pen RoGOgB?editors=1111 by axe-z (@axe-z) on CodePen

 

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

[Trying to play with .mp4 file currentTime, to forward or reverse]

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

 

[Having a hard time with default behavior of a simple transition.]

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  

[Having a hard time with default behavior of a simple transition.]

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 !

See the Pen dOogRz by axe-z (@axe-z) on CodePen

[Multiple timelines, on the same element, with different event listeners.]

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. 

[Multiple timelines, on the same element, with different event listeners.]

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 ! 

[Multiple timelines, on the same element, with different event listeners.]

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 ? 

See the Pen gwZVXA by axe-z (@axe-z) on CodePen

[Wish you had more tutorials, Gsap seems great, but there is alot that is not covered.]

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.