Scrolltrigger adding space in Safari in MacOS and Ipad

[Omen1313]

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>

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo, even a not working Codepen is helpful. The issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Omen1313]

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.

See the Pen XWyovVe by Samuel-Barber (@Samuel-Barber) on CodePen

 

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

[GreenSock]

Are you trying to do something like this?: 

See the Pen VwVgZLJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just wrap the whole thing in a container and pin that instead.

[Omen1313]

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.

[GreenSock]

Are you saying the video doesn't play? That's unrelated to GSAP. Please see this thread: 

If there are other problems, please provide a minimal demo and be very clear about what exactly is "broken" and how to reproduce the issue. For example, "animations are broken" isn't as helpful as "when I scroll past the first ScrollTrigger, the GSAP animation doesn't fire at all". 

[Omen1313]

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.

[mvaneijgen]

That is what the end markers are for. If you set it to 7000 instead of 700 it will take 10x as long. I've also enabled markers, so that you visually can see what is happening. Hope it helps and happy tweening! 

 

See the Pen jOQdRpW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Omen1313]

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.

[alig01]

Hey, 

 

the large white space, is the reserved space for the video that cannot be loaded because the video format is not supported by safari. 

Fortunately you are not the only one who has encountered this problem. I think in this thread should be the answer how to proceed (and additional information about the problem).

 

 

I hope this steers you in the right direction to solve the encoding/format problem. 

Good luck with your project.

[Omen1313]

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.

[alig01]

I tried 2 different videos from the provided threads and it is definitely an encoding issue. If you look at the demo, the first video is still there, after the scrolling animation for the second video has started (second video reproduces your issue on Safari).
 

See the Pen JjwPNZb?editors=1010 by alig01 (@alig01) on CodePen

 

With the video from this thread, the problem is reproducible: 

 

and with the video from this thread everything works as expected:

 

I would advise you to just play with the different techniques described in the linked threads (or from the other answers) to prepare your video and come back later to share your results.

 

[Omen1313]

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.

[GreenSock]

Like @alig01 said, this has nothing to do with GSAP - if you completely remove GSAP/ScrollTrigger, you'll see that big white space where the video should be, but Safari doesn't allow that video format. So I'd suggest just focusing your energy on getting that video to work in Safari first, then start applying GSAP/ScrollTrigger. These forums are for GSAP questions, not general video or encoding questions, sorry. Anyone is welcome to post an answer to that, though.

[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?

[GreenSock]

7 minutes ago, Omen1313 said:

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?

Please provide a very clear minimal demo that shows that. When I commented-out GSAP/ScrollTrigger in the demo you provided above, the video was NOT visible in Safari on Mac. At all. It had nothing to do with GSAP/ScrollTrigger. 

 

If you still need help, make sure you not only provide that demo, but also give very clear steps to reproduce the problem. Maybe even a video of it occurring for you.