Hi, we are having an issue with a gsap animation. Everything works fine on desktop but the issue happens on iOS.
When you are at some position in the page after scrolling, the animation goes instant to the start position of the timeline.
There are no classes or other code that gets triggered except the code beneath this post.
So after scrolling it is actually top 50vh that gets set. Am I doing something wrong here? the $logo in the scrollTrigger in the fromTo is the same element as '.logo-gsap'. It happens some time after you stopped scrolling so I don't really think that it has something to do with you stop scrolling.
I wonder what it could be since it is only on iOS that the issue is happening.
let logoTl = gsap.timeline({
scrollTrigger: {
trigger: document.body,
start: 0,
end: () => window.innerHeight,
scrub: 0
}
});
logoTl.fromTo('.logo-gsap', {
top: '50vh',
yPercent: -50,
scale: 1,
height: '10vw',
}, {
top: '0',
yPercent: 0,
scale: isMobileSize ? .6 : .2,
height: '0',
scrollTrigger: {
trigger: $logo,
},
});