Omen1313

Ok, so when I remove the gsap/scrolltrigger, the video is visible with no white space. Does that throw a wrench in this not being a gsap/scrolltrigger issue?

Thank you. I tried a number of different combinations and I am not getting any change. I followed the one step by step and went from there changing the video params and testing. I am beginning to think it is a mac iOS thing. I noticed that in Chrome on an iPad and a mac laptop, it is doing something similar to the Safari issue but not as drastic. I am just not smart enough to figure this out, if it can be.

Thanks again for the help. I did see this and tried it on my project and while it did seem smoother for both Chrome and Safari, I am still getting the large white space after the video (in Safari only). It all works correctly but continues to scroll past the video frame section with a white block the size of the video frame. Again, I don't believe it is a Greensock issue. I do appreciate all the help and advice.

Thanks for the help. I am still having issues in safari with a large white space after each section . But everything else is working great.

Thank you for your help. In a long about way, I believe I found a solution to the issue I was having and it is a Safari/IOS issue or code adjustment that needed to happen. I noticed on my code I did not have a "type="video/mp4" in the video link string, I added that and now it shows up on safari. One other item I was curious about, is it possible with scrolltrigger to adjust the scroll length for a video. In the example here I have two individual videos and the timing for the page height works but if I were to say combine the videos into one, I would want the scroll to take a little longer so that everything would be seen in a natural time instead of a "fast playback" look. Is that possible? Thanks again for being so responsive and quick to help.

Yes. So your example is a container around all the content on a page and pin that? This is in SHOPIFY (final version) but I may be able to accomplish that. When I test it on safari, it doesn't seem to work. Same issues I saw before. Either the animations disappear entirely or there are white boxes after the animations. I am not sure if its a code issue or a safari issue.

Thanks so much for that. I could not get it to work but after a little bit I have been able to create an example with the code I am trying to use. https://codepen.io/Samuel-Barber/pen/XWyovVe So the issue I am having is in chrome, there is the scrolling space that happens under the video sections and show a white space. In responsive sizes it can be worse or non-existent. I don't know if that can be dealt with or not. The BIG issue is that in Safari on Ipad and Imac, the space after each video scrolltrigger section is a full page height of white space that scrolls up in between the two videos and again after the last video. The code in the Codepen is exactly what I am using except for the divs before and after the two scrolltrigger sections. Please let me know if I can provide anything else to help with the troubleshooting and I really appreciate the quick response and help so far. Thanks again

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>