well-syrup v0.0.33

🥞 Syrup by Wellflow

Syrup is an attributes-based animation library built for creating quick and customizable animations in Webflow.

Video Scroll

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' autoPlay='false' loop='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.