Animation Issue

[Kishan Kalathia]

Animation is working with a video link which is uploaded in dropbox , but when I'm changing the video link which is uploaded in S3 and delivered through CDN , there are some problems occuring 

After putting the link of S3's video , first whole video image in background gets scolled , and  after that video is also not running on scroll trigger  

I'll put Screen Recorder video with both video links

DROPBOX :-

link :  https://www.dropbox.com/s/szqgjiqrz1khbno/Rollercoster_v005.mp4?raw=1

video :- https://www.dropbox.com/scl/fi/yv381qo5uuiv3qeoun7a5/Screencast-from-12-10-23-11-25-16-AM-IST.webm?rlkey=au6dk9qfy8picr8o7neie8bqc&dl=0

S3 :-

link :  https://drlnizua5eu2a.cloudfront.net/link-visual/Roadmap.mp4

video :- https://www.dropbox.com/scl/fi/8lgnoeiblh815t0uzufvf/Screencast-from-12-10-23-11-29-13-AM-IST.webm?rlkey=xn11jj0na0ip854a6jnjwivw9&dl=0


Please provide solution

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Kishan Kalathia]

Did you check the links I shared ?

 

[mvaneijgen]

Hi @Kishan Kalathia welcome to the forum!

 

Sadly we can't debug live website and debugging live sites from a video is even more impossible. Your best bet is to create a minimal demo on Codepen.io demonstrating the issue, so that we can take a look at your code and modify it to nudge you into the right direction. Hope it helps and happy tweening! 

[Kishan Kalathia]

https://codesandbox.io/s/awesome-hopper-cydlct?file=/src/App.js

check this please

 

[mvaneijgen]

All I've done is wrap your GSAP code in a let ctx = gsap.context(() => {}), which you can read here:

2 hours ago, GSAP Helper said:

React (please read this article!)

Hope it helps and happy tweening! 

 

https://codesandbox.io/s/great-sunset-37f23w?file=/src/App.js:532-558

[Rodrigo]

Hi,

 

On top of Mitchel's great advice, scrubbing video performance is more related to video encoding than anything else, as mentioned in these threads:

 

 

Finally we have a fully dedicated section to React in our resources page:

https://gsap.com/resources/React/

 

Happy Tweening!

[Kishan Kalathia]

Thanks @mvaneijgen for the help
Greatly appreciated..!!

[Kishan Kalathia]

https://codesandbox.io/s/thirsty-dubinsky-zqzxwl?file=/src/App.js

I want to make the video more smoother on scrolling

I've done the above code , the video is around 9 mb

I've attached the link of my code , anyone can check and see that the video is lagging too much on scrolling

Please provide me a better way to make this video smoother and faster

Any help will be appreciated

Thanks in advance..!!

[Rodrigo]

Hi,

 

Unfortunately this has nothing to do with GSAP, as was already explained. This is about video compression and encoding, and the way browser rendering works. Is not just about size in terms of how many MB the video is but keyframes.

 

Please read the information in this threads:

 

We're sorry that you are experiencing this problem and I wish there was something we could do to help, buts as mentioned this has nothing to do with GSAP so there is nothing we can do. Please read the forums guidelines:

 

Good luck with your project!

Happy Tweening!

[Kishan Kalathia]

H264 encoded
mp4 File
25 FPS video
4.3 mb  video only

But still lagging , after above properties , don't you think this problem could be related to GSAP ??

 

[GreenSock]

No, that's definitely not a GSAP issue. It's almost surely related to how you encoded the video. Remember, it's not just about a format...it's the spacing between keyframes embedded in the video and several other factors that are all about the encoding. 

[Rodrigo]

Hi,

 

Jack indeed offers a detailed explanation here:

 

Happy Tweening!