RLM

So I am finally getting a smooth playback of the video while scrolling. https://codesandbox.io/s/react-video-scrolling-forked-xntdvl?file=/src/App.js ---> code It would be really great if other people can also get access to read this thread. I am writing the steps below: So this process will work for everybody, regardless of your processor. This method works on m1, so it must work on all Windows machines and earlier Intel MacBooks, this could also work on the new m2 chipset machines also. The pre-requisite is that you must have adobe premiere pro. I have the 2022 version of adobe premiere pro Warning: Your video should not be more than 10 seconds long if you want to have playback while scrolling using gsap scroll trigger plugin or else the result video file size will be very large. A Video of 2-3 seconds works the best. Steps: 1. First bring your video on the premiere pro timeline. You can drag the video from whatever folder you have stored it in, into premiere pro 2. If you want some edits in your video, you can do it here. This is an optional step. 3. Go to the export tab. You can find the export tab on the top left. 4. Then click on the drop-down arrow next to the video tab and then click more. 5. Scroll down a bit then you can see the bitrate and keyframe distance options. Then make the value of the keyframe distance 1-5 ( 1 worked best for me ). Also then increase the bitrate value to 25-35 Mbps. 6. Now you can export and the use the exported file for your website development. Now if you think like me, and you choose to compress the exported video file, then don't do it, because I guess the compressors change the bitrate and the keyframe distances of the video. So if you'll use the compressed video in your development, you will again face the scroll lag with your video.

Ok, I have removed the tag. Plus yes running virtual machine would be very cumbersome, as only parallels support the arm chipsets and it is paid while other which are free, do not support arms chipsets : (. But do you have any idea what type of encoding is done using ffmpeg? because I have found one encoder, which works fine on my laptop. So if I could know what type of encoding is done, I could then iterate the same thing on that encoder.

Hey, can you please tell me how did you encoded your video using ffmpeg in your M1. I am unable to run the ffmpeg software on my M1 laptop bcoz ffmpeg is not made for m1 laptops and maybe rosetta is not able to handle it properly.

Hi, I am also trying to make a scrolling animation with a video, on React 18. I am also facing the lag on scrolling on Chrome, but the animation is working fine on Safari ( no video encoding done yet using FFmpeg ) The only issue I have right now is that ffmpeg does not support M1 laptops, and I am using M1 MacBook air. So do you have any other recommendations for the video encoding software. ( I tried running ffmpeg on my m1 laptop, but the software doesn't even runs properly. I though maybe Rosetta would be able to run ffmpeg ) Also if any GSAP experts @Cassie @Rodrigo have any idea how I can encode the video, hopefully without using ffmepg. Thanks in advance!

https://codesandbox.io/s/react-video-scrolling-forked-xntdvl?file=/src/App.js ---> code Hi, I am trying to make a video play through scrolling. Here the video is being played but the problem is that the video is playing after a while I have stopped scrolling. Basically a lag I would say, but I want it to be smooth. Pls, help me. https://codesandbox.io/p/sandbox/react-next13-gsap-control-video-fd969p --> This has helped to write the code that I have written up until now for the video scrolling animation.

Wait now I am again facing the misalignment issue. I'll solve it and come back later.

The problem I was getting after putting the scrolltrigger configs inside a timeline is now resolved. Now the only problem I have is of pining the helper1 video inside the mbp image and make both of them animate using scorllTrigger.

Hi, Sorry earlier I wasn't able to showcase what problem I have, but now I can share it properly. The misalignment of the laptop and the video with respect to the screen, that you said earlier, is maybe a feature or a bug in sandbox. ( Please to preview the app, open the preview of the website on a new tab.) To fix that so that we can see the images & videos aligned properly with the viewport, we need to inspect the app running on the localhost/preview in sandbox and then we need to click ->"toggle device toolbar". After that select the dimensions as Responsive and stretch the viewport to the right. Then just zoom out a bit and we can see that everything is aligned. Maybe BTS, sandbox do some changes in the resolution. Now that this is fixed. Following is the link to the code --> https://codesandbox.io/p/sandbox/sharp-sutherland-vcjvnw?welcome=true The code is in the file --> src/components/intro/index.jsx As you said, I should put ScrollTrigger configurations inside a Timeline, but when I am doing it, let tl = gsap.timeline({ scrollTrigger: { trigger: hivEl, markers: true, start: "clamp(top center)", end: () => `clamp(bottom+=${mbEl.height * 8} top)`, onEnter: () => { mbEl.style.top = "0px"; }, onEnterBack: () => { mbEl.style.top = "0px"; }, scrub: 1, pin: mbEl } }); tl.fromTo( mbEl, { scale: 1 }, { scale: 0.75, } ); all I am getting is a blank screen. Can you help me why am I getting a blank screen?

Sorry for no CSS, but actually I have written no CSS yet in my local environment and the image and video are in the correct position, so I thought that the same should work in sandbox, maybe the screen resolution changes in sandbox's preview. As you said, I should not put ScrollTrigger configurations in an instance inside a Timeline, but when I am doing this, let tl = gsap.timeline({ scrollTrigger: { trigger: hivEl, markers: true, start: "clamp(top center)", end: () => `clamp(bottom+=${mbEl.height * 8} top)`, onEnter: () => { mbEl.style.top = "0px"; }, onEnterBack: () => { mbEl.style.top = "0px"; }, scrub: 1, pin: mbEl } }); tl.fromTo( mbEl, { scale: 1 }, { scale: 0.75, } ); all I am getting is a blank screen. Can you help me why am I getting a blank screen?

https://codesandbox.io/s/frosty-orla-ygc7h4 ---> code In this code, I want to clip the video of vs code inside the screen of the laptop. I am attaching the desired result image. (link: https://drive.google.com/file/d/1SmZvHDxxXdfxLJIgVNfy-7SjWpt5HBSN/view?usp=sharing ). Also after clipping this video I have to animate it with ScrollTrigger so that video plays with scrolling. Please help me figure this out, I have been trying to do this all day

brooooo!! thank you very much. This helped me and fixed the issue also!!!!!!!!

Thanks, now I can show the actual problem that I am facing in a better way

I am trying to make an animation just like the video that I have attached. The one that I have attached is also made by me, but I am facing a lot of issues because the one that you are seeing actually the animation which is getting produced due to some problem that i cannot resolve. I am very new to GSAP. I am using ScrollTrigger plugin for the animation that I want. Also, I am attaching a link to a video to show the complete issue that I am facing ( link" https://drive.google.com/file/d/10u0dioPKN8ykGuYdUKn2c9FHsANLW7IF/view?usp=sharing ) . Following is the code ( I am using React ), and I am using no other CSS property or any other javascript either. This is the only code that I have written: import React, { useRef, useEffect } from "react"; import { mbp } from "../../img/imageModule"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Intro = () => { let mbimg = useRef(null); useEffect(() => { const el = mbimg.current; gsap.fromTo( el, { scale: 1.3, }, { scale: 0.75, scrollTrigger: { trigger: el, markers:true, start: "clamp(top top)", // end: "clamp(bottom 50%)", scrub: true, pin: true, }, } ); }, []); return ( <div className="hero-section relative"> <div className="hero-image"> <img className="mbp zoom" src={mbp} alt="macbook-pro" ref={mbimg} /> </div> </div> ); }; export default Intro; Screen Recording 2023-06-13 at 19.08.53.mov