Jump to content
Search Community

Looking for someone to implement ScrollTrigger

Thepaulcollett test
Moderator Tag

Recommended Posts

Hey guys


I have a website: http://www.paulcollett.co.uk/index9.html  and need to have ScrollTrigger implemented in two (maybe three) sections. The first instance uses the GASP before and after scroll technique which works, but is covered in black from the second ScrollTrigger action which is to play a video on user scroll. Here is the demo I used or the code  

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen


It's sort of working, but as mentioned it creates a black square on one ST section, and the this particular section the scroll starts too soon so will need to be adjusted. Hope all that makes sense, if anyone out there can fix this, you'll be a god send.


Many thanks

Link to comment
Share on other sites

Your main issue is with video encoding, please check that first. Above codePen has also mentioned it on its code block.


The encoding is super important here to enable frame-by-frame scrubbing. You should try following:

ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4
ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4


You can test with above (codePen's) video to make sure that your code is working. By the way, I've tested on your site so code is working only the video should be fixed.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...