Attribute Based Animation Library for Webflow
npm install well-syrupSyrup is an attributes-based animation library built for creating quick and customizable animations in Webflow.
With this attribute, you can make a video play and reverse on scroll. This tool is built on top of the scrolly-video package.
To create a Video Scroll, create a Custom Element with tag 'div' (video will not work) with the following styles:
Width: 100vw
Height: 100vh
Position: Sticky
Fit: Cover
Then add the following attributes:
[syrup-el='scroll-video']
[src='YOUR_VIDEO_SRC']
[autoPlay='false']
[muted='true']
[loop='true']
[playsInline='true']
Webflow Designer Placeholder
To have the video display for a preview in the Webflow Designer, you can duplicate the element and change the tag to 'video'. Give the element the attribute [syrup-el='scroll-video-placeholder']
Video Hosting Tips
I host my videos on AWS S3 / CloudFront. It's really easy to set up, cheaper than Vimeo, has no ads, and loads quickly.