Scroll Sequence Guide

For the first(Jeep Car), second(earth), and third(Tractor) demos, I used Cinema 4d to 3D model and render the sequence. for other demos, I used the CC0 videos from YouTube (I guess from Dolby vision, not sure). I Used After Effect to convert video frames to PNG image sequences(https://www.youtube.com/watch?v=ysd3k-WaL0Q).

And to convert the PNG sequence to optimized webp images, I used: https://anywebp.com/convert-to-webp. before that, for some renders, I used: https://pixelied.com/convert/png-converter/png-to-webp but it is slow and takes time to upload the video as it does the processing on the server side, but anyweb does it on the browser I guess so it is way faster.  

Converting Video to Image Sequences

Method 1: Using After Effects or Premiere Pro

If you have access to Adobe After Effects or Premiere Pro, these powerful video editing tools can be your go-to solution for converting video to image sequences. Here’s a simple guide:

1. Import Your Video: – Open After Effects or Premiere Pro. – Import your video file into the project.
2. Create Image Sequence: – Drag the video file to the timeline. – Right-click on the video in the timeline, choose “Export,” and select “PNG Sequence” or “JPEG Sequence” as the format.
3. Adjust Settings and Export: – Adjust settings such as frame rate if needed. – Choose a destination folder and hit export.]

If you prefer a quick online solution, ezgif.com offers a simple tool to convert videos to image sequences:

1. Visit ezgif.com/video-to-jpg. 
2.  Upload your video file.
3.  Customize settings if necessary (e.g., frame rate).
4. Click “Convert to JPG” and download the image sequence.
5. 

Method 4: VLC Media Player

Converting Images to Optimized WebP

To ensure your Scroll Sequence widget loads quickly and efficiently, convert the exported image files to the WebP format. We recommend using anywebp.com/convert-to-webp.

1. Visit anywebp.com/convert-to-webp.
2. Upload your image files.
3. Adjust compression settings if desired.
4. Click “Convert to WebP” and download the optimized WebP files.

Conclusion: By following these simple steps, you can convert video frames to optimized WebP images, ensuring your Scroll Sequence widget delivers a seamless and fast user experience. Experiment with different methods and find the one that best fits your workflow and preferences. Happy coding!