Having trouble with a white space showing up in Safari only after a scrolltrigger section. When I add a second video into the code to scrolltrigger, the code adds the space after each video section. I have tried changing some parameters as well as margins and none seem to have an affect on the space that shows up. This code is being implemented in Shopify (site). Everything works fine in Chrome and Firefox. (can't get the code to work at all in codepen)
Here is the code:
<div class="video-container">
<video id="video1" class="video-scrub"
src="https://cdn.shopify.com/s/files/1/0583/2268/2043/files/raw0001-0072.mkv?v=1689285807"
playsinline="true"
webkit-playsinline="true"
preload="metadata"
muted="muted">
</video>
</div>
<!-- Gsap ScrollTrigger-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"
integrity="sha512-Q+G390ZU2qKo+e4q+kVcJknwfGjKJOdyu5mVMcR95NqL6XaF4lY4nsSvIVB3NDP54ACsS9rqhE1DVqgpApl//Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- -->
<style>
.video-container {
text-align: center;
}
.video-scrub {
width: 100%;
height: 75%;
}
</style>
<script>
gsap.registerPlugin(ScrollTrigger);
let videoNumber = 2 // Total number of videos in the page. Each <video> element should have an id starting from "video1" incremented to "video2", "video3", etc.
for (let i = 1; i <= videoNumber; i++) {
let video = document.querySelector("#video"+i);
let src = video.currentSrc || video.src;
console.log(video, src);
// Scroll control
const videoScrub = gsap.timeline({
currentTime: video.duration,
scrollTrigger: {
trigger: video,
start: "top 50",
end: "+=600 50",
scrub: true,
pin: true
}
});
/* Make sure the video is 'activated' on iOS */
function once(el, event, fn, opts) {
var onceFn = function (e) {
el.removeEventListener(event, onceFn);
fn.apply(this, arguments);
};
el.addEventListener(event, onceFn, opts);
return onceFn;
}
once(document.documentElement, "touchstart", function (e) {
video.play();
video.pause();
});
// Make sure the video has loaded
once(video, "loadedmetadata", () => {
videoScrub.fromTo(video, {currentTime: 0}, {currentTime: video.duration || 1});
});
} // end for loop
</script>