Scrolltrigger Animation is acting weird on iOS

[kadircakir]

Hey GSAP team,

 

I have finally implemented this awesome animation thanks to Scrolltrigger.

There is something weird we are experiencing on iOS devices though. The video seems to snap back without finishing the video and when scrolled down scale/grow on its own without interacting.

 

I made an screen recording to give a better idea as everything is working fine in codepen and desktop devices.

https://www.dropbox.com/scl/fi/523nany5speehrbfp06jp/RPReplay_Final1698089823.mp4?rlkey=0242obc90ektonmk3mocykzk5&dl=0

 

The animation is set up as;

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>

const video = document.querySelector('.section-pin video source');

if (window.matchMedia("(max-width: 991px)").matches) {
	video.src = video.dataset.tabletSrc;
} else if (window.matchMedia("(max-width: 767px)").matches) {
video.src = video.dataset.mobileSrc;
} else {
video.src = video.dataset.src;
}
video.closest('video').load();
video.closest('video').play();


ScrollTrigger.defaults({
  markers: false
});

ScrollTrigger.create({
  trigger: ".scale-video-wrapper",
  start: "top top",
  end: '+=1000',
  pin: '.section-pin'
});

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".scale-video-wrapper",
    start: "top top+=100px",
    end: "+=1000px",
    toggleActions: "play reverse play reverse"
    // scrub: true
  }
});
tl.to(".video", {
  duration: 0.2,
  scale: 1,
  // ease: "none",
  ease: "power4.in"
});

function onVideoHasEnded() {
  tl.reverse();
}
</script>

<script>
document.querySelector('.section-pin video').addEventListener("ended", function() {
    onVideoHasEnded()
});
</script>

 

Here is a prototype link for own testing if needed; https://glasnu-nl-20.webflow.io/glasnu-nl/video

 

Any idea what could be causing this?

 

Thanks in advance!

Edited October 24, 2023 by kadircakir
Added prototype for testing

[Rodrigo]

Hi,

 

There is not a lot we can do without a minimal demo. Please check this:

 

The only thing I know is that videos can act in weird ways on iOS devices, but the issue you describe doesn't sound like is caused by GSAP IMHO.

 

Happy Tweening!

[GreenSock]

Did you try doing this?: 

ScrollTrigger.config({ ignoreMobileResize: true })

I wonder if it's just because it's refreshing things when the address bar shows/hides.

[kadircakir]

Rodrigo you are AMAZING!

 

It felt like I was about to lose my mind with this.

When pinned true animation was working all fine, but when pinned to a specific section on the page it went all looney tunes.

 

This worked like a charm!

ScrollTrigger.config({ ignoreMobileResize: true })

 

Thanks a lot man, now I can finally get some sleep, haha.