Hello community,
I've implemented an effect on my website using Scroll Magic to make a video play as the user scrolls down the page. This effect works perfectly in other browsers, but I'm experiencing significant performance issues in Google Chrome.
Issue Description:
The video stutters noticeably on Chrome, while it plays smoothly in other browsers. I've checked and haven't encountered any other notable performance issues on my website. The problem seems specific to Chrome, as I don't observe this stuttering in other browsers.
This is my JS code:
const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
//END SECTION
const section = document.querySelector('section');
const end = section.querySelector('h1');
//SCROLL MAGIC
const controller = new ScrollMagic.Controller();
//SCENES
let scene = new ScrollMagic.Scene({
duration: 9000,
triggerElement: intro,
triggerHook: 0
})
.addIndicators()
.setPin(intro)
.addTo(controller);
//TEXT ANIMATION
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});
let scene2 = new ScrollMagic.Scene({
duration: 3000,
triggerElement: intro,
triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);
//VIDEO ANIMATION
let accelAmount = 0.1;
let scrollPos = 0;
let delay = 0;
scene.on("update", e => {
scrollPos = e.scrollPos / 1000;
});
setInterval(() =>{
delay += (scrollPos - delay) * accelAmount;
video.currentTime = delay;
}, 10);
My HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AxB|Home</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="intro">
<h1>Make it floating</h1>
<video src="Images/Floating2.mp4"></video>
</div>
<section>
<h1>REVOLUTIONARRY</h1>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"
integrity="sha512-8Wy4KH0O+AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58+Y8Z08qzeg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js"
integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP+Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"
integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>
And my CSS code :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
}
.intro{
height: 100vh;
}
.intro video{
height: 100%;
width: 100%;
object-fit: cover;
}
.intro h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 80px;
color: white;
}
section{
height: 100vh;
color: black;
}
section h1{
padding-top: 300px;
text-align: center;
font-size: 80px;
}
What I've Tried So Far:
I've reduced the dimensions of the video to improve performance, but the issue persists. I've looked for Chrome-specific video performance issue solutions without success so far.
HTML5 video cannot autoplay unless muted like this...
However, you're using some 3rd party library that apparently overcomes this and auto-plays in the background... presumably with sound?
Therefore, do we have a conflict here with the browser because you failed to mute the player?
Give it a try by adding the mute parameter and see how that goes.