RLM
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by RLM
-
-
25 minutes ago, Rodrigo said:
Hi @RLM,
Sorry to hear about the issues. You are welcome to post in different threads asking for advice from other users, just don't tag them directly.
Personally I have zero experience using ffmpeg and I'm not a Mac user so I can't help you with this. Also software compatibility is quite beyond the scope of these forums. We need to keep things focused on GSAP related issues. This is more a question for Stackoverflow/exchange or a dedicated ffmpeg forum/board/community.
One option (not a simple one though) you could explore is to install and run a windows virtual machine in your macbook and run ffmpeg there, but for what I understand that is quite a hassle.
Good luck with your project!
Happy Tweening!
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.
-
On 8/31/2022 at 8:21 PM, benjazehr said:
Hi there,
I'm yet another person that tries to play back a video on scroll
I already checked (this, this, this and this thread and copied lots of code from this nice example rendered below my post) but did not succeed in making my videy play back smoothly.
I created this sandbox to play around with it:
https://codesandbox.io/s/nostalgic-mopsa-nghmmm?file=/src/App.js
I encoded my video using the following command:
ffmpeg -y -i videoplayback.mp4 -vf scale=1600:-1 -movflags faststart -vcodec libx264 -crf 33 -g 1 -an -pix_fmt yuv420p test.mp4
The result is 50 seconds long and ~25MB of size.
My problem ⚠️:
Within the first 10-20 seconds of the visit on the page and on not-brand-new devices in general, the playback is far from smooth and has lags of several seconds. (My M1 is handling it all pretty well which makes debugging very hard.)
As others observed before me: Safari is no problem at all – working great. But Chrome and especially Firefox are nod good enough.
I'm so jealous of the NYTimes and their setup – it's working great. How could I improve the performance of my setup?
Do you have any ideas? Kind regards, Benja
(PS: Somehow the video in the codesandbox plays twice – I don't understand why. PSS: Using JPGs is not an option as they'd be 90MB total.)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.
-
4 hours ago, RLM said:
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?
Wait now I am again facing the misalignment issue.
I'll solve it and come back later.
-
3 hours ago, RLM said:
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?
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
-
2 hours ago, GSAP Helper said:
Hi there! I see you're using React -
Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes youruseEffect()anduseLayoutEffect()to get called TWICE.In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.
Here's the structure:
// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []);
This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.
We strongly recommend reading the React information we've put together at https://greensock.com/react
Happy tweening!
brooooo!! thank you very much. This helped me and fixed the issue also!!!!!!!!
-
1
-
-
20 minutes ago, Rodrigo said:
Hi @RLM and welcome to the GreenSock forums!
We have a collection of Starter Templates that use GSAP in React apps so you can take a look and fork in order to create a minimal demo:
https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters
Also be sure to check the resources in this page:
Hopefully this helps.
Happy Tweening!
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;
Video Scrolling not working
in GSAP
Posted
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.