Jump to content
GreenSock

AdventurousDeveloper

ShockinglyGreen
  • Posts

    31
  • Joined

  • Last visited

Community Answers

  1. AdventurousDeveloper's post in GSAP Scrolltrigger video scrubbing on scroll laggy/choppy in Firefox (Svelte issue?) was marked as the answer   
    Hey @amcaw,
     
    No worries at all!
     
    I couldn't help myself and dug out my old project files for a bit of a refresher. I've put together a CodePen to show how I got everything working. Hopefully this will get you going and also help other people with video scrubbing and ScrollTrigger. I've tested this across Safari, iOS Chrome, FireFox and Edge, but adjustments may still needed to be made.
     
    Just a couple of notes from what I found out on my way getting this to work:
    I struggled with large video sizes and page load, I had to find a happy medium of video quality and file size. H.264 is widely available, namely H.265 (better in that it compresses more for the same quality, or gives higher quality for the same size). To use it, replace the libx264 codec with libx265, and push the compression lever further by increasing the CRF value — add, say, 4 or 6, since a reasonable range for H.265 may be 24 to 30. Note that lower CRF values correspond to higher bitrates, and hence produce higher quality videos. I contemplated using images instead, see the GSAP AirPods   

    See the Pen XWZxLyO by AdventurousDeveloper (@AdventurousDeveloper) on CodePen
     
    What made the magic happen was setting scrollTrigger onUpdate progress to half the FPS of the video to allow the entire video to be scrubbed for the duration of the scroll. Playing around with the end value will extend the length of how long/short you need the video to scrub for.
     
    No doubt there may be a more efficient of doing this, so maybe someone else could fine tune further.  
     
    Hope this helps 👍
     
×