After scrolling in iOS, the animation goes to its Startposition from the timeline

[MOQO]

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,
             },  
});

[mvaneijgen]

You probably have a CSS property called scroll-behavior: smooth; set which can cause this issue. Also a timeline can only have one ScrollTrigger and ScrollTriggers can not be set on individual tweens of a timeline. 

 

Hope this helps solve your issue, otherwise please provide a minimal demo so that we can take a more in depth look.

[MOQO]

Aha thanks! The solution was actually removing the scrollTrigger in the fromTo.

Now that I know that its kinda logic.

 

Thanks!