Stop Video on Popup Close

Here's an easy way to create a masked video in text in Webflow. No custom code is required. This was created with an SVG file and added interactions to zoom in while scrolling.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

Here's a way of adding custom popup modals for video and content to your Webflow site. These custom content modals utilize custom code to disable scrolling when the pop up modal window is open. This helps prevent user confusion and scrolling of the site when these modal windows are open. For the video popup additional jQuery code is utilized to stop the video from running in the background when the window has been closed.

A unique GSAP Webflow cloneable in which items expand on hover with a unique transition. In this example there are three vertical columns, when hovering over one of them it expands it into view and closes the other opened vertical column. This is accomplished via GSAP & Flip.js which can be found in the custom code section of the page settings. The code is customizable to target different classes and then adds or removes a class to those other classes. Flip allows you to customize the duration and the easing. In this demonstration there are three videos and three tab divs. Do not get confused that these are normal Webflow tabs as these are just the names of the div. Be sure to check out this use case of using GSAP, Flip.js and Webflow together to create a unique interaction.

Here's a way of creating structured CMS pop up modal for your CMS items in Webflow.

A copy and paste GDPR compliant cookie consent widget. This Webflow cloneable features a pre-made and GDPR compliant cookie consent widget perfect for your Webflow site. This method stops all scripts from loading, requires no javascript editing and utilizes Webflow's data attributes and works with Webflow interactions. You can create multiple options for the levels of cookie consents and this cloneable comes with 5 different variations of the cookie consent, one that utilizes Webflow interactions. This is a complete solution to allow you to properly validate your users cookie experience based on GDPR requirements.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

Create a popup iframe modal in Webflow easily with this cloneable. This cloneable allows you to you easily create a popup modal of an iframe URL, perfect for portfolios or pages in which users do not need to navigate to another page. Keep users engaged and on your site while allowing them to preview portfolio sites and other similar projects.

Here's a way to have Webflow's native slider adjust to the height of the contents within each slide. This allows you to dynamically change the size of the slider based on the height of each slides content rather than having the content adjust to the height of the entire slide module.

Here's a way to provide an add all to cart button in Webflow ecommerce. Perfect for upsells and multiple purchases being added to cart at the same time in your Webflow ecommerce store. Be sure to add the custom code snippet found within the closing body tags of the Page Settings in order for this to work.

Stop those pesky videos from playing in the background when the modal or popup has been closed by the user. Apply this to your sites body code and view the instructions in the following loom video: https://www.loom.com/share/ae76cd611f604de5af8cffea8b25efa3

Here's a way to use native Webflow attributes to send and receive data to text fields or div/text elements. This can be useful for allowing users to contact different departments via Webflow's native forms. Please note that you'll need to add the custom code found within the body close tags within Page Settings for this method to work properly.

A very unique JS hack that shows your sites publishing status in your browser tab. Helpful for Webflow's slow publishing times. Navigate to another page/browser tab and watch the status of the publishing LIVE. In order to get this technique to work you'll need to inject the code found on the cloneable to your browser. To inject the code you'll need to use a 3rd party javascript injection tool for Chrome such as CJS or CJS2. You can then copy and paste the elements above and set it to only load on Webflow.com.