luisalbertom

As outlined in the ScrollTrigger documentation, when the container employs 'display: flex', the 'pinSpacing' attribute defaults to 'false'. This default setting is intentional, as padding behavior is notably distinct within flexbox contexts. To address this, setting 'pinSpacing' to 'margin' is the recommended solution. https://codepen.io/luis-lessrain/pen/OJdqodE

@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.

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 https://codepen.io/luis-lessrain/pen/wvRoBBz

Hi @shadysw, Previously, I integrated GSAP with Swiper for specific projects utilizing GSAP's ScrollTrigger. For further insight, refer to the CodePen and examine the updateSwiperState method in the JS view; it may assist in achieving your objective. https://codepen.io/luis-lessrain/pen/PoXwpEo