I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here.
When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire.
What can I do to resolve this
In the section: Stop iOS Safari from resizing the window on scroll
body, html {
height: 100vh;
width: 100vw;
overscroll-behavior: none;
overflow: hidden !important;
}
#viewport {
position: fixed;
overflow-x: hidden;
overflow-y: scroll;
height: 100vh;
width: 100vw;
-webkit-overscroll-behavior: none;
overscroll-behavior: none;
-webkit-overflow-scrolling: touch;
}
https://greensock.com/docs/v3/HelperFunctions#scrollResize
My simple scrollTrigger on the element is just this but it breaks cause the above CSS
ScrollTrigger.create({
trigger: '#test',
start: 'top top',
// endTrigger: '#otherID',
end: 'bottom 50%+=100px',
onToggle: (self) => console.log('toggled, isActive:', self.isActive),
onUpdate: (self) => {
console.log(
'progress:',
self.progress.toFixed(3),
'direction:',
self.direction,
'velocity',
self.getVelocity()
);
}
});
Thanks for the solutions/links. These help me solve this!