Video Scroll Motion

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Video Scroll Motion
  1. Home
  2. Knowledge Base
  3. Media Drive
  4. Video Scroll Motion

This widget allows users to put video into motion by simply scrolling down a page. If the user changes direction and scrolls up, the video reverses direction and plays backward.

This video effect has been used on large websites like Apple.com and has become a highly sought-after site experience. Achieving this technique typically requires custom coding or extensive processing of a video clip in order to reduce it to hundreds of individual image frames. But our widget makes it easy – all you need is a video clip!

Note: This widget works best with video files hosted in Media Drive.

Preview: https://demo.wocode.com/video-scroll-motion

Tutorial Video

 

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it where you would like the video scroll motion to appear on your page layout.
  • Note that since this widget uses page scroll to advance through video frames, it will add considerable length to your page, based on the length of the video. When you place the widget into a row, it is normal for the containing row to become quite long.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: Use this field to apply a unique ID to the widget (the default value is fine to use). Note that multiple instances of this widget should not be used on one page.
  • There are 3 possible sources for the video you use, as discussed below. But keep in mind that video streamed from Media Drive will always perform the smoothest. See the Video Preparation section below to grab our optimization preset and more information.
  • Media Stream URL: This is the link to your video stored in Media Drive. This option provides the best performance of the 3 video options available because you may optimize the video yourself for the best performance. To get the link, click the link icon for your video in Media Drive.
  • Upload Video: You may use the Upload Video button to upload a video. However, note that you may see performance issues with uploaded video. The Without Code builder automatically optimizes video that is uploaded, by compressing it. This optimization is designed to improve file size and page load speeds but the method of optimization is not ideal for the way this widget works. Note that the builder optimization takes place with the Upload Video option regardless of whether you’ve optimized the video yourself already.
  • YouTube, Vimeo or DailyMotion URL: You may use a share URL from YouTube, Vimeo or DailyMotion. However, performance may vary with these videos, as they will be optimized.
  • Video Length: This determines the length or portion of the video that will be shown in the video scroll motion. This setting does not have to match the length of the video, however you must use a value here that is equal to or less than the length of the video you’re using. Keep in mind that this widget is most useful for shorter videos (3-15 seconds is usually best).
  • Scroll Offset: Use this to offset the page position in which the video motion begins. This is useful if the video begins scrolling sooner or later than you’d like, or if you need to account for your site header. Negative values may be used.
  • Enable Overlay: You may use a color or image overlay. Color overlays help to stylize a video or match a brand, while transparent PNG grids can be used to improve the look of low resolution video. You may choose a color, load an image or customize in the Design section.
  • Enable Title an/or Description: You may display a title, description, or both. Enable this setting to turn the feature on.
  • Title/Description: Enter the title and description text. Leave a field empty to disable it from view.
  • Enable Text Fade: This feature creates a fade of the title and description text as the user scrolls.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the gallery; such as title and description styling, spacing and entrance animations. Note that this where you will choose a color or overlay image for the overlay option, as discussed above. We will not go over individual design settings, as they are labeled with their exact function and are self-explanatory.

VIDEO OPTIMIZATION

Video optimization is absolutely crucial. Video files that are just a few seconds long can be 20mb+. Large file sizes make the widget perform poorly, and result in bad page load speeds. Optimization drastically reduces file sizes, improving widget performance and page load speeds.

To make things easy, we’re providing a video optimization preset for you to use with Handbrake. Handbrake is a free, open source video transcoder that is awesome for optimizing video.

To optimize your video:

  • Download Handbrake.
  • Download our preset for Handbrake.
  • Open Handbrake.
  • Click Presets, then Import.
  • Click Open Source to select your video.
  • Ensure that the Video Scroll Motion preset is selected in the Preset dropdown.
  • Click Start to encode the video.

DON’T SKIP THIS STEP!

You may be tempted to skip this optimization step because your video editing software has a web optimization feature and you already have a small file size. Keep in mind that file size is not the only factor. Video codec, frame rate, and other factors are vital for a good user experience with this widget. By optimizing your video using the steps above, you can be sure you’re providing the best user experience on your site.

MORE VIDEO TIPS

  • Watch file size: As mentioned earlier, file size is important. Large video files can cause page load speed problems because the browser must load the entire video file when loading the page. The handbrake preset we provided will drastically reduce the video file size. Your video should only be a couple MB in size, and certainly less than 10MB! Aim for between 2-4MB.
  • Use shorter videos: This widget is intended more as an effect than as a way to display a normal informative video. As the user learns that they are in control of the video, they will likely be drawn to scrub the video frames back and forth, slowly and quickly. But overall, the video playback will usually be close to “slow motion”. Long videos are unnecessary and cumbersome. Use shorter videos with somewhere between 3-15 seconds as your target.
  • Trim videos: You may have noticed the “Video Length” setting in the widget options. This does not trim your video. This setting simply controls the amount of video that the widget will show. If your video is 10 seconds and you want the viewer to see all 10 seconds, then set this setting to 10. However, if you only need to show the first 5 seconds of the video, then it is best to trim the video to 5 seconds rather than loading a 10 second video. This way, the page load speed will be better as the browser only has to load a video that’s half the size.
  • Avoid “slow motion”: Lots of shorter, dramatic videos you might be tempted to use are “slow motion”. Slow motion videos are less ideal for this use case because the user will be controlling the speed of the video scrubbing, and normal speed video will often have a slow motion feel when used in this way. So slow motion can feel too slow.
  • Use Media Drive: As mentioned above in the Widget Options section, there are 3 video source options: Media Drive, uploaded video and video from streaming services such as YouTube, Vimeo or DailyMotion. We provide these options in order to provide flexibility but keep in mind that the Media Drive option is absolutely recommended for the smoothest video performance.Uploaded video and video from the streaming services (YouTube, Vimeo and DailyMotion) are all subject to optimization. When optimized, video is compressed. Compressed video may result in choppy, slow or otherwise poor performance.Media Drive was built with streaming in mind, and is the perfect video hosting for use with this widget. Video is not altered in any way, and allows the Video Scroll Motion widget to perform at its best.To learn more about Media Drive, see our documentation, which includes video tutorials: https://app.wocode.com/categories/media-drive/

Related Articles

Join Now