• Record/prepare a video no longer than 10 seconds.
• Use HD quality (1920×1080) to ensure crisp image output.

• Download FFmpeg from https://ffmpeg.org/download.html.
  • For Windows: Choose the option “Windows builds from gyan.dev.”
• Extract the downloaded ZIP file.
• Copy the bin folder to C:\ffmpeg

• Press Windows + R
• Type ‘cmd’ and press Enter
• Navigate to the folder where you have your video: cd path/to/your/folder

• -i “[full_path_video]”
  • Specifies the input video file. Replace [full_path_video] with the full file path of the video you want to process.
  • Example: "C:\Users\George\Downloads\MyVideo.mp4".
• -vf “fps=24”
  • Applies a video filter (-vf) to set the output frame rate to 24 frames per second (fps).
  • This means FFmpeg will extract 24 images per second of video.
• -c:v libwebp
  • Chooses the video codec (-c:v) to encode the frames into the WebP format, which is optimized for web usage and supports transparency.
• q:v 90
  • Sets the quality of the output images. The -q:v flag adjusts the compression quality:
    • 0: Lowest quality, smallest file size.
    • 100: Maximum quality, largest file size.
• “C:\bin\frames_%04d.webp”
  • Specifies the output directory, filename format, and image format:
    • C:\bin: Folder where the images will be saved.
    • frames_%04d.webp
      • frames_: Base name for the images.
      • %04d: Sequence numbering padded to 4 digits (e.g., frames_0001.webp, frames_0002.webp).
      • .webp: File format for the output images.

• Use an FTP client (e.g., FileZilla) to upload the generated frames.
• Create a new directory on your server:
  • wp-content/uploads/project-name

• Upload all the frames to this folder.
• Note the base URL of your frames, such as:
  • https://yourdomain.com/wp-content/uploads/project-name/frame_

The path ends in ‘frame_’ because the numbering is not taken into account. If you had defined another name such as ‘images’ then the path would have to end in ‘images_’.

Required Attributes

1. data-scroll-sequence

   • Purpose: Marks the section as a scroll sequence container.
   • Usage: Add this attribute to your section to enable the scroll-based animation.

2. data-frames

   • Purpose: Specifies the total number of frames in your animation.
   • Value: The exact number of WebP images you extracted using FFmpeg.
   • Example: If you extracted 90 frames, use data-frames="90".

3. data-sequence-path

   • Purpose: Defines the base path to the WebP frames stored on your server.
   • Value: The complete URL path, including the prefix of your image filenames.
   • Example: If your images are stored at https://yourdomain.com/uploads/project/frame_, use data-sequence-path="https://yourdomain.com/uploads/project/frame_".

Optional Attributes

1. data-desktop-width (Default: 80)
   Specifies the width of the canvas container in percentages for desktop devices.

2. data-desktop-height (Default: 80)
   Specifies the height of the canvas container in viewport height (vh) for desktop devices.

3. data-mobile-landscape-height (Default: 80)
   Sets the height of the canvas container in landscape mode on mobile devices (in vh).

4. data-mobile-portrait-height (Default: 100)
   Sets the height of the canvas container in portrait mode on mobile devices (in vh).

5. data-start-delay (Default: 0.2)
   Indicates the percentage (as a decimal) of the viewport height to scroll before the animation starts.
   Example: 0.2 means the animation begins after scrolling 20% of the viewport height.

6. data-section-height (Default: 150)
   Sets the total height of the section (in vh), allowing control over the scrollable area.

7. data-animation-effect (Default: none)
   Adds effects to the animation, such as:

   • zoom-in: The image zooms in as the scroll progresses.
   • zoom-out: The image zooms out as the scroll progresses.

8. data-animation-intensity (Default: 1)
   Adjusts the intensity of the animation effect. Higher values increase the zoom effect for zoom-in or zoom-out.

9. data-disable-mobile (Recommended for performance)
   When present, disables the animation on mobile devices. Instead, a static image (frame_0001.webp) is displayed for better performance.