Video animation with ScrollTrigger, GSAP and react

[Andy1708 2 Likes (Newbie)]

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 7,048 Likes (Superhero)]

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 2 Likes (Newbie)]

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 7,048 Likes (Superhero)]

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