Video
Play
Pause
Scrolltrigger
Window
Detect
Scrolling
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div class="demo-video">
<div class="demo-video__before"></div>
<div data-video="playpause" class="cover-video">
<video class="cover-video__video" src="https://osmo.b-cdn.net/resource-media/play-pause-resource-RostislavUzunov.mp4" muted="" loop="" webkit-playsinline="webkit-playsinline" playsinline="playsinline"></video>
</div>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.demo-video {
border-radius: 1em;
width: 34em;
max-width: calc(100% - 4em);
position: relative;
overflow: hidden;
}
.demo-video__before {
padding-top: 75%;
}
.cover-video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.cover-video__video {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
// Register GSAP Plugins
gsap.registerPlugin(ScrollTrigger);
// Resource
function initPlayPauseVideoScroll() {
const videos = gsap.utils.toArray('[data-video="playpause"]');
videos.forEach(el => {
const video = el.querySelector('video');
if (!video) return;
ScrollTrigger.create({
trigger: el,
start: '0% 100%',
end: '100% 0%',
onEnter: () => video.play(),
onEnterBack: () => video.play(),
onLeave: () => video.pause(),
onLeaveBack: () => video.pause(),
});
});
}
// Initialize Play/Pause Video on Scroll
document.addEventListener('DOMContentLoaded', function() {
initPlayPauseVideoScroll();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
Implementation
Attribute
For this script to work, simply add the attribute [data-video="playpause"] to any parent element of a HTML video. The script will search for a descendant <video> element and automatically play or pause it based on its visibility. This optimization improves performance by ensuring that videos only play when they are in view. Note that the [data-video="playpause"] attribute does not need to be on the direct parent of the <video> element.
Demo
The demo visually demonstrates the effect by showing how the video behaves when it’s out of view. We achieved this by adjusting the ScrollTrigger start and end values.
Scrolltrigger
This script uses GSAP ScrollTrigger to detect when the video enters the viewport. However, you’re free to implement your own observer setup if you prefer.
Search
K
Resource Details
Last updated
March 10, 2025
Type
The Vault
Category
Video & Audio
Need help?
Join Slack
Original source
Dennis SnellenbergCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.