Pause Video on Modal 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 technique to display multiple video popup modals in Webflow and have the videos pause on close. Please note that in order for this to work you'll need to utilize the custom script found in the body close tags. These are tied to the class names of the cloneable so you'll need to customize the classes if you add, remove or copy the code from the cloneable.