Andy1708 Posted June 29, 2020 Share Posted June 29, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 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. Link to comment Share on other sites More sharing options...
Andy1708 Posted June 29, 2020 Author Share Posted June 29, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 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 1 Link to comment Share on other sites More sharing options...
Ben82 Posted August 4, 2022 Share Posted August 4, 2022 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? Link to comment Share on other sites More sharing options...
Cassie Posted August 5, 2022 Share Posted August 5, 2022 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! Link to comment Share on other sites More sharing options...
chinnmay Posted September 17, 2022 Share Posted September 17, 2022 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 17, 2022 Share Posted September 17, 2022 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted September 17, 2022 Share Posted September 17, 2022 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!!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now