Video animation with ScrollTrigger, GSAP and react

[Andy1708]

Hello,

Can you tell me if it is the best way to play the animation with Scrolltriger, gsap and react.

Is there another way to acheive this ?

 

I have attached a codepen demo.

 

Thanks in advanced

See the Pen PoZKxrd?editors=0111 by YVES_V (@YVES_V) on CodePen.

[ZachSaucier]

Hey Andy. Please do not create multiple threads for the same question. We will make sure that every post gets answered when we're able to answer them - reposting threads doesn't help  

 

The pen that you link to throws an error:

Quote

Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite.
    at pen.js:30

It'd be helpful if you changed the demo to make it reproduce the situation that you have.

 

Regardless, using a setTimeout and requestAnimationFrame is very likely a bad way to go about doing what you're trying to do. Why not set the video's current time inside of the ScrollTrigger's onUpdate? It'd perform better and likely be less buggy.

[Andy1708]

6 hours ago, ZachSaucier said:

 

Sorry Zack,

i thought i was lost in the flow…

 

i try to set the video's current time inside the scrollTrigger but it doesn't work !

 

any idea ?

Thanks

Andy

[ZachSaucier]

As you saw in the console, the values are NaN that you're trying to use. Fix that and set the currentTime and it works:

See the Pen QWyqVve?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Ben82]

Is there a way of incorporating this animation into a timeline, so you would have some animation before and after the video that would also be pinned?

 

[Cassie]

Hey there, welcome to the forums!

 

Tweens also have an onUpdate function, so you could create a timeline and pop the onUpdate logic into a tween on that timeline instead of on the timeline itself.

 

There are lots of forum posts dotted about with this same technique, so I suggest having a look around too
 

Hope this helps!

[chinnmay]

ZachSaucier hey sir, the react explanation that you have given is working completely perfect but how much i try i cannot add smoothness to the image can you explain how to do it please sir....thank you

[GSAP Helper]

If you're trying to scrub video, the main issue is going to be the way you encode your video. Specifically how often you embed keyframes. You have to understand how video works (how it is encoded and decoded so you can make sure the playhead can move around FAST). It's not a GSAP issue. 

 

If you still need help, please make sure you provide a minimal demo and ask a GSAP-specific question and we'd be happy to jump in and help with those. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

[Rodrigo]

Hi @chinmay and welcome to the GreenSock forums!

 

This is somehow a recurrent question. In the following thread and more specifically, the post by @Cassie gives you the best possible answer to it:

 

Hopefully that information helps you to achieve what you're looking for.

 

Happy Tweening!!!