Video Scroll Animation

[Guest]

Where can I find a tutorial or maybe docs or blogs where I can learn how to make a video be animated on scroll. Like every time I scroll the video runs 1 or 2 frames. 

I am also interested in animating movement of elements on scroll.  Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again.  An example would be https://zoox.com/ .

Thank you!

 

[akapowl]

 

Hello @CodyHill

 

I don't think there is an absolute one-way-fits-all solution, so things will probably depend a lot on how exactly you imagine things to be working and how advanced your understanding of ScrollTrigger, JS and video-processing is, in general.

 

While we don't offer tutorials for effects you might have seen on other websites in this forum, searching the forums (and codepen.io, too) is always a great start for finding examples for different effects.

 

For instance, here is a pen showing how to smoothly scroll through a video via ScrollTrigger...

 

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen

 

 

 

...but be aware that for it to be working smoothly, things mostly come down to using the correct codec/encoding of the video.

 

These other links/threads might be helpful with that regard...

 

https://blog.video.ibm.com/streaming-video-tips/keyframes-interframe-video-compression/

 

 

 

 

 

...and this one here also contains a helper function by @GreenSock for scrubbing through video via ScrollTrigger.

 

 

 

 

If you're having trouble with getting things properly setup for your videos being scrubbed through smoothly, you might want to consider going down a different route, scrubbing through sprites / image sequences instead...

 

 

 

 

 

...with this here probably being the most popular thread with that regard, recreating Apple's Airpods Website...

 

 

 

 

...and these here are my takes on an explanation of what is going on in that Airpods example...

 

 

 

 

...and an approach for better understanding how to possibly add some text animations to it.

 

 

 

 

As mentioned, things will heavily depend on how advanced your understanding of ScrollTrigger is. If you understand how the basic principles work and have a decent understanding of how to create the proper setup & logic for your needs around ScrollTrigger, i.e. your HTML/CSS/JS and asset preparation, almost anything is possible - if it is not logically impossible.

 

For getting a good grasp of ScrollTrigger's core principles, I'd suggest @Carl's ScrollTrigger Express course - and since ScrollTrigger is tied to GSAP, signing up for his Creative Coding Club will benefit you in general, as he also offers great courses for GSAP in general, and understanding GSAP's basics is sort of a pre-requisite for understanding ScrollTrigger.

 

 

 

1 hour ago, CodyHill said:

I am also interested in animating movement of elements on scroll.  Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again.  An example would be https://zoox.com/ .

 

As for that part; I'm not sure I understand what it is, you are asking here. On that website you linked, I don't see any scroll-triggered tweens or scrolling on the x-axis as you are describing.

 

So if for that question you could maybe try and re-formulate what exactly you are having problems with, alongside a minimal demo of what you have tried so far, maybe somebody will be able to help. Best would be, to also create a new thread for that question, as this does not have much to do with the title of this one, and it might be more helpful for others in future too, if that question would be topic of a different thread.

 

But as I already mentioned above - be aware that this forum is not intended for providing 'how do I do this special effect I saw somewhere else' custom-code solutions and tutorials, as the forum guidelines state.

 

If you do have any GSAP specific questions or get stuck at an approach of yours, we'll be happy to help and/or nudge you in the right direction.

 

In the meantime, maybe this thread might be somehwat helpful with regard to that description of yours concerning the cards.

 

I hope all this will be helpful. Happy scrolling and even happier tweening!

 

 

[Guest]

@akapowl Thank you very much for the vast answer!

21 hours ago, akapowl said:

 

Quote

As for that part; I'm not sure I understand what it is

 

I will create a new thread and I will proved a codepen.

[ivisM]

Dear community, I hope anyone can help me with this animation on scroll video.

 

The scroll animation is working great with a video, as shown in this example:

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen

 

However, when I use another video:

See the Pen XWyOGGm by ivis24 (@ivis24) on CodePen

 

It gets stuck in Google Chrome for some reason. I hope someone has experience with this kind of problem?

[akapowl]

4 hours ago, ivisM said:

It gets stuck in Google Chrome for some reason. I hope someone has experience with this kind of problem?

 

It's not just in Google Chrome; Firefox [Win 11] has the same choppy result for me.

Honestly, I couldn't tell for sure, but my best guess is, that this is related to the encoding of your video;
which is super important for this and also mentioned earlier here...
 

On 6/18/2022 at 4:35 PM, akapowl said:

...but be aware that for it to be working smoothly, things mostly come down to using the correct codec/encoding of the video.

 

 

 

... and in the upper portion of the JS in the codepens.
 

/* The encoding is super important here to enable frame-by-frame scrubbing. */

// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4
// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4

Just from a quick glimpse at the specs of both videos, I can see huge differences between them;
for instance, you use a much higher resolution (1920x1080 vs 960x540 in the original pen) and a much higher framerate (60 fps vs 30 fps in the original codepen) - so naturally the browser would already have to do a whole lot more work with your video compared to the one in the original pen even if you followed the advice on the encoding of the video apart from the points mentioned.

Besides pointing you towards down-sizing the quality of your video and re-iterating the part about the proper encoding of your video, there isn't much I can give you advice on; as that is most likely more related to how your video is encoded / set up in general.
 

[ivisM]

Hello @akapowl thank you for you super fast response. Then we try to play with the codec, maybe we can find the issue. 

Thank you !:)

[GreenSock]

Yep, I bet @akapowl is correct - smoothly scrubbing video is highly dependent on how you encode your video (frame rate, codec, fps, and...most importantly...keyframe placement/frequency). It's totally unrelated to GSAP/ScrollTrigger. 

 

Good luck!

[ivisM]

Thank you, @GreenSock  for your help! If anyone else has experienced the same issue and knows how to solve it, I would greatly appreciate your insights  

[Rodrigo]

Hi,

 

Check this post and the threads linked in it in order to understand a bit better how to proceed 

 

Finally @RLM was quite generous in sharing how to resolve a specific issue to correctly compress a video to make it work properly:

 

Hopefully this helps.

Happy Tweening!

[ivisM]

@Rodrigo thank you a lot! The steps worked for me very well. The Animation is now great!

[Ninthony]

Just wanted to comment here. I had a video that was transparent and in the webm format. Had to use some different settings in ffmpeg:

 

ffmpeg -c:v libvpx-vp9 -i ~/Downloads/Transparent_video.webm -movflags faststart -crf 23 -b:v 0 -c:a libvorbis -g 1 -pix_fmt yuva420p output_transparent_video.webm

 

Had to use a different video codec that supported transparancy (libvpx-vp9) and insert it before the input, and the pix_fmt has to be yuva420p not just yuv420p 

 

Hope it helps someone! Thanks for all the info in the thread everyone.

[Ninthony]

Updating here again with some issues encountered.

 

So this worked great for the most part. Unfortunately, iOS does not play nicely with .webm files. Doesn't work at all on iOS. I ended up following along with this tutorial from CSS tricks that seemed to address the issue of transparent video not playing on iOS:

https://css-tricks.com/overlaying-video-with-transparency-while-wrangling-cross-browser-support/

 

Unfortunately, though this does work in getting playable video with transparency working on iOS, the original issue has returned. When exporting from FFMPEG with their line:

 

ffmpeg -framerate 25 -i unscreen-%3d.png -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 150 output.mov

The codec and pix_fmt they use is incompatible with their -crf parameter (Constant Rate Factor), which as specified above is very important to the rate of how the video is scrolled through. And as I understand the article, this pix_fmt is necessary for Finder to recognize it and be able to reencode it. I'm at a loss of what to do. I have little to no knowledge of video encoding, and was very happy I was able to get it working previously. If anyone has any ideas, I'm not entirely sure how the Constant Rate Factor effects the animation, it seems to be in reference to frames from the post above but when I search it up it only seems to reference resolution:
https://ottverse.com/cbr-crf-changing-resolution-using-ffmpeg/

I'm at a loss of what to do on iOS

[luisalbertom]

Here are some of my personal observations regarding video encoding, aimed at assisting anyone interested in this domain. These are the key elements that would most directly affect the performance and effectiveness of attaching the video to a scrollbar for scrubbing operations:

 

-vf "scale=-1:1080": This scales the video height to 1080 pixels while maintaining the aspect ratio.
-preset slow: Though this setting makes the encoding process slower, it provides better compression, which could be beneficial for smooth scrubbing because smaller file sizes usually load faster.
-movflags +faststart: This is crucial for video scrubbing. It allows the video to start playing before it is completely downloaded, making it quicker to start viewing during a scrub operation.
-keyint_min 6 -g 6: These settings control the interval between keyframes, which are the frames used as reference points for the frames that follow. Fewer frames between keyframes can make seeking more accurate but may increase file size. These settings are vital for smooth and accurate scrubbing.
-an: Disabling the audio.
-crf 20: This controls the quality of the video. Depending on your needs, you might want to adjust this to find a balance between video quality and file size, which will affect the speed and smoothness of scrubbing.
-format yuv420p: Ensures broader compatibility with media players.

# ffmpeg command:

ffmpeg -i {input_video}.mp4 -vf "format=yuv420p,scale=-1:1080" -vcodec libx264 -profile:v main -level:v 5.1 -crf 20 -preset slow -tune animation -movflags +faststart -keyint_min 6 -g 6 -strict -2 -an {output_video}_scrub.mp4

See the Pen wvRoBBz by luis-lessrain (@luis-lessrain) on CodePen

[Ninthony]

Thanks @luisalbertom -- really appreciate all the info here. Doesn't get me much further with the transparency issue on iOS, but does help me understand what is more important. Thank you

[luisalbertom]

@Ninthony , the ProRes 4444 codec is known for generating large file sizes due to its high-quality, near-lossless or lossless nature, designed to retain the utmost amount of information. While this is advantageous for preserving both quality and transparency, it is not conducive for minimizing file size, streaming, or smooth scrubbing.

Given that smooth scrubbing and transparency are critical for your project, along with iOS compatibility, here are a few alternative strategies for managing transparent videos on iOS while potentially achieving smaller file sizes. While I haven't tested these methods personally, they might be worth exploring:

 

HEVC with Alpha Channel:

HEVC (High Efficiency Video Coding, also referred to as H.265) supports alpha channel encoding, offering a more efficient alternative to ProRes 4444. This codec has the potential to reduce file size while retaining transparency.

ffmpeg -i {input_video}.mp4 -vf "format=yuva420p,scale=-1:1080" -c:v libx265 -pix_fmt yuva420p -crf 20 -preset slow -g 6 -keyint_min 6 -movflags +faststart -an {output_video}_scrub.mov 

 

AV1 with Alpha Channel:

AV1 is a newer, open-source codec with support for alpha channel encoding, and is more efficient than ProRes 4444. However, be aware that support for AV1 on iOS devices might still be limited, Apple AV1 Support - Bitmovin

ffmpeg -i {input_video}.mp4 -vf "format=yuva420p,scale=-1:1080" -c:v libaom-av1 -crf 20 -g 6 -keyint_min 6 -movflags +faststart -an {output_video}_scrub.mkv 

 

Optimized ProRes 4444:

It's possible to reduce the file size of ProRes 4444 videos by either lowering the resolution or tweaking other settings, although such alterations might impact video quality

ffmpeg -i {input_video}.mp4 -vf "scale=-1:720" -c:v prores_ks -profile:v 4444 -pix_fmt yuva444p10le -movflags +faststart -an {output_video}_scrub.mov

 

It may need some experimentation and testing to ascertain the optimal balance for your specific needs.

[newguy123]

On 9/27/2023 at 5:14 AM, luisalbertom said:

Here are some of my personal observations regarding video encoding, aimed at assisting anyone interested in this domain. These are the key elements that would most directly affect the performance and effectiveness of attaching the video to a scrollbar for scrubbing operations:

 

-vf "scale=-1:1080": This scales the video height to 1080 pixels while maintaining the aspect ratio.
-preset slow: Though this setting makes the encoding process slower, it provides better compression, which could be beneficial for smooth scrubbing because smaller file sizes usually load faster.
-movflags +faststart: This is crucial for video scrubbing. It allows the video to start playing before it is completely downloaded, making it quicker to start viewing during a scrub operation.
-keyint_min 6 -g 6: These settings control the interval between keyframes, which are the frames used as reference points for the frames that follow. Fewer frames between keyframes can make seeking more accurate but may increase file size. These settings are vital for smooth and accurate scrubbing.
-an: Disabling the audio.
-crf 20: This controls the quality of the video. Depending on your needs, you might want to adjust this to find a balance between video quality and file size, which will affect the speed and smoothness of scrubbing.
-format yuv420p: Ensures broader compatibility with media players.

# ffmpeg command:

ffmpeg -i {input_video}.mp4 -vf "format=yuv420p,scale=-1:1080" -vcodec libx264 -profile:v main -level:v 5.1 -crf 20 -preset slow -tune animation -movflags +faststart -keyint_min 6 -g 6 -strict -2 -an {output_video}_scrub.mp4

 

 

Sorry to resurrect an old thread, but is this example suppose to work on mobile?

It's super smooth on pc, but on my Android the video is like 1 frame per week, I already scrub through all the text, before the video moves a few frames.

 

On my iPad its also super smooth, just laggy as heckon my Android, which is on same wifi as pc and iPad...
Weird.

 

On my Android I tried Samsung Internet, Firefox and Chrome, but it makes no difference. It's extremely laggy on the video.

 

I'm 100% sure its not a GSAP issue, so at the minute I'm just trying to confirm if other people with Android have similar issue with this pen, or its only me. Either way, would be nice if a community member could pinpoint what the issue may be...

 

EDIT: Tried on my kid's Android also, same laggy result

[Rodrigo]

Hi,

 

This seems more like a limitation on android devices more than a GSAP related issue. Some android devices are really underpowered hardware-wise, especially the GPUs, so that most likely will cause issues in rendering.

 

For so many reasons, beyond performance, I would advice you against using videos on small devices (battery consumption, data usage, videos sometimes being awkward when playing and displaying and the list goes on).

 

There could be other alternatives, but that would imply to deeply get into HTML's media elements API and trial and error like playing the video between certain times depending on the ScrollTrigger progress, but my goto move would be to not use video on android and be done with that, but of course that's just me.

 

Sorry I can't be of more assistance.

Happy Tweening!

[GreenSock]

Honestly, that kinda sounds like a video codec thing to me. Are you positive that you encoded your video properly, with keyframes super frequent? As you said, none of this has anything to do with GSAP - it's just that videos are typically encoded in a way that there's a whole keyframe every so often, and subsequent frames only record the change from the frame before, so it can be very expensive processing-wise to jump around in the video because the CPU has to stitch everything together, pulling the missing data from previous frames, etc. That's why setting it to record a keyframe on every frame (video encoding) makes it so much smoother. 

 

In short, if I were you, I'd focus a lot of attention on trying different video encoding settings. Or just export a series of frames and then you can use the helper function I created for this thread: