Animate video on scroll

Ask the community
1

Hi there !

I am trying to accomplish an animate video on scroll effect, however I cannot find a way to make that work.

Should I use a Lottie animation ? If so is there a way to achieve this type of effect ?

Thanks in advance !

2
  1. Animation on Scroll | Velo by Wix
  2. Full Screen Scroll | Velo by Wix Examples | Wix.com

…and you can find some more examples.

Generate your own SCROLL-FUNCTION by using some code.

3

We have a dedicated solution released now:

:smiling_face_with_sunglasses:

1 Like
5

@Vanyadoing This app is epic! I hope I can get it to work. Question… the scroll is MADDDD choppy on my website. I exported my video into 90 transparent PNGs (3 second video at 3fps)… Is this too many? Not enough? Not a factor and something else is wrong? Would love some input!

7

Hi Brandon,

Thanks a lot for the kind words - I’m really excited to hear from anyone trying the app! :raising_hands:

About the choppy scroll: there isn’t one “perfect” setup, because it depends on a few things: scroll distance, FPS, video length and even the type of animation. For example, talking heads / people usually need a much smoother, more continuous motion to feel natural, while abstract shapes and objects are more forgiving.

In your case:

  • You mentioned 3 seconds at 3fps, which would mathematically give 9 frames,
    but you exported 90 PNGs, so I’m guessing it might actually be closer to 30fps (maybe a typo) or there’s a mismatch somewhere.

  • 90 frames is totally fine for 3sec video, but if the scroll distance is large, each scroll step will “jump” too many frames and feel choppy.

A few things to try:

  1. Reduce the scrolling distance in the app settings

    • Make the distance shorter and see if the motion becomes smoother. Less distance = smaller “jumps” between frames.

  2. Adjust FPS vs distance

    • If a shorter distance fixes the choppiness, but you want a longer scroll, you can then increase FPS / frame count to keep it smooth over that longer distance.

  3. Enable “Smooth Scroll” in the app settings

    • If the main issue is the mouse wheel feeling jerky, turning on the built-in smooth scroll can help a lot with that

  4. Test on the demo page

    • At the bottom of the demo page there’s an interactive example where you can play with scroll distance, video length and FPS to feel how each parameter affects smoothness:
      :backhand_index_pointing_right: https://www.vanyadoing-dev.com/video-scroll

If nothing helped. Don’t give up. If you’d like, I can also take a quick look at your setup and suggest more concrete numbers. You can reach me via the contact form here:

:backhand_index_pointing_right: https://www.vanyadoing-dev.com/contact

or email me at: vanyadoing@gmail.com with more details (like a link to your published page and maybe attached video file so I can try to reproduce it myself) so I can take a look and be more concrete :slight_smile:

8

I GOT THE VIDEO TO WORK!!! The scroll is smooth and crispy!! haha

Instead of uploading my own PNGs after the folder was created, I just uploaded my video and let the widget pull my frames. Highly recommend this widget!

@vanyadoing Question, is it possible to have the video player aspect ratio different across all breakpoints? The mobile breakpoint is sticking to 9/16 but whatever I choose for the desktop breakpoint is carrying over to the tablet. When I change the tablet ratio, it changes the desktop ratio.

My goal is to have the video be as close to 100vh without the video being cropped.

9

Hi @Brandon_Hostetler ,

Glad to know you got it to work.
That’s why we created a feature to convert the video into the frames. :wink:

Regarding breakpoint. On WIX we are limited to identify only (Desktop/Tablet) or (Mobile).
If WIX expose some API we can use to differentiate desktop from tablet - we will implement this feature asap. Meanwhile we can only think on how to add another way to adjust video height. Currently, we only use popular proportions, such as 16:9 4:3 1:1 3:4 9:16. But I will definitely explore more ways we can provide expect of proportions.

Thank you for letting me know. :slight_smile:

Have a good one,
Ivan
Vanyadoing

1 Like
10

@Vanyadoing I’m noticing a little bug. When I load/refresh the page, I briefly see the section underneath the widget before the page loads the widget into frame.

My widget is the first section on my homepage so I want to make sure nothing else is seen before the video scroll effect. Any suggestion on how to fix this?

11

Hi @Brandon_Hostetler ,

The widget is embedded into your site during page load, and once it initializes, it still needs to fetch the image sequence from Wix servers to run the animation. Because of this extra request, a brief delay can occur, during which the section below may momentarily appear.

As a workaround, I would recommend placing a static image of the first frame underneath the widget. This way, the first frame is already visible while the widget and its data finish loading, preventing any unwanted content from flashing before the animation starts.

On a related note, we’ve just released a few new features you might find useful:

  1. Custom sizing
    You can now easily set the widget height using values like 100vh or custom calculations such as calc(100vh - 100px).

    image
    image854Ă—779 47.2 KB

    image
    image1644Ă—1412 162 KB

  2. Video Resolution control
    You can adjust frame quality based on the rendered size. For example, if the widget renders at 1000Ă—1000px:

  • Setting Video Resolution to 50% renders frames at 500Ă—500px

  • Setting it to 150% renders frames at 1500Ă—1500px

    image
    image1287Ă—1165 75.4 KB

Lastly, if you’re enjoying the app, we’d really appreciate a review - it means a lot to us :slightly_smiling_face:

:right_arrow: Click here to rate the app :left_arrow:

1 Like