How to Add Parallax Effect to Squarespace Background Video

You might be aware that there is parallax effect for background images on Squarespace 7.1 but there are no effects for background videos

1. Let's start with the core parts. This is a technique with the latest Document Object Model API called ScrollTimeline and the .animate method

2. Browser support. It is possible to achieve this animation using only CSS but it is not possible at the time of recording to use it also on Safari and Mozilla browsers. The good news is that there is a polyfill(like a plugin) to make it work also on these browsers. The plugin mentions that it should also work to make the animation work on these browsers for CSS but in my tests, it did not work. So

for this demo, I will be using the JavaScript version.

3. We will need to use a MutationObserver to observe when the video Element is added to the DOM and after applying the animation to it

4. Debugging tips. Inspect with developer tools and play with the values of translate, rangeStart and rangeEnd

5. In the video description of the video you will find a link to the GitHub source code