Video + text appearing

[ivevil 5 Likes (Newbie)]

Hello,

I wanted to have video controlled on scroll which I found a good an example and I just took it for testing purposes. I am happy with how it is working. What I wanted to achieve is - to add a text appearing and dissappearing so you have feeling that you are flying through the text - one paragraph by one.
I added a codepen as an example - but the thing is - my first paragraph is not shown at all and the second and third are for the short period shown - I tried to control them with the duration parameter but it seems like it is not working.
I assume that stagger is giving me troubles, but if I set it lower, then all texts are showing at the same time - overlapping each other.

Can somebody help me please with this one?

Thanks.

See the Pen bGMLJJw by ivevil (@ivevil) on CodePen

[Rodrigo 5,407 Likes (Superhero)]

Hi,

 

There are a few things that could be changed in order to improve this.

 

First, in scroll based animations the duration of each instance inside a timeline simply represents the percentage of the duration of the timeline, nothing more, so bigger or smaller values won't make much difference. The mindset and approximation has to be different.

 

Second, regarding the text elements, you're trying to animate something that is fixed in the middle of the screen but without a defined start or end points, so the defaults are used which are the top of the element reaches the bottom of the viewport, that's why your first text is midway through the animation.

 

Finally there is no need, IMO, to position elements whose parent is already positioned. Right now the text element has a fixed position and the paragraphs inside of it are as well fixed. The paragraphs need to just sit inside without any position, unless you want them to be vertically and horizontally centered.

 

This fork of your pen works a bit better IMHO. I just made a single timeline where  the video element gets pinned so you can scroll past that element:

See the Pen QWrmdxP by GreenSock (@GreenSock) on CodePen

 

Hopefully this is closer to what you're after. If you have any other questions, please let us know.

 

Happy Tweening!

[ivevil 5 Likes (Newbie)]

Hello Rodrigo,

Thanks a lot for your response and suggested improvements. I really appreciate it. The codepen you improved looks really great! but it seems like I didn't explain really good what I wanted to achieve.
I wanted to have the paragraphs come one after another - one by one. So basically something like this:

See the Pen poVLKNW by ivevil (@ivevil) on CodePen

But as you can see in my example - once I added them one by one, video is blocked in the background while they are playing.  I wanted to have video moving and paragraphs moving one by one at the same time.
That is the reason why I was doing two timelines in my first codepen, but maybe you know better solution?

Thanks!

[Rodrigo 5,407 Likes (Superhero)]

Ahh yeah I see. In that case is better to create all the texts animations using a loop:

let tl = gsap.timeline({/*...*/});

const texts = gsap.utils.toArray(".text-p");
texts.forEach((text, index) => {
  tl
    .from(text, { scale: 0, autoAlpha: 0, duration: 1, })
    .to(text, { scale: 5, autoAlpha: 0, duration: 1, }, ">+=1")
});

The reason for the video seems to be blocked is because the durations don't match. The total duration of all your text animations is far longer than the duration you set for the GSAP instance that controls the video's progress. GSAP is actually running that tween and is updating the video's progress, is just happening too fast! 🏎️

 

For that you can use the duration() method and function based values to set the duration of the video's progress instance to match the duration of the text animations:

coolVideo.onloadedmetadata = function () {
  tl.to(coolVideo, {
    currentTime: coolVideo.duration,
    duration: () => tl.duration()
  }, 0);
};

I updated the codepen example:

See the Pen QWrmdxP by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[ivevil 5 Likes (Newbie)]

Thank you so much, that is exactly what I needed. And thanks for all explanations, it really helps.

 

Regards,

[BebDev 5 Likes (Newbie)]

Hi @ivevil

 

I really need your advice about how you encoded your video to play smoothly. I'm trying to play video on scroll, but it's very choppy and @Rodrigo told that it might be related to how the video was encoded. So, any help would be appreciated!

 

See the Pen yLjEBKz by abanobakram (@abanobakram) on CodePen

 

Regards

[ivevil 5 Likes (Newbie)]

Hello @BebDev,

Unfortunately the video that I used for my showcase is not my video - I took it from here: 

See the Pen ExZGrbZ by wisearts (@wisearts) on CodePen

where it says that encoding must be done like this:
ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4

I tried the existing encoding method but it wasn't helping me much with my video. After a while I realise that also aspect ratio is important - so the video can't be too wide, it must be 960x540 and also duration of video is important - if the video is longer then it seems more choppy.

Also please take a look at this thread too:

And please let me know also if you find something new that can also help me in revealing this mistery about scrolling video - although I have second thoughts about this approach at all and thinking to give up. Maybe I will just go for image burst instead like this: