David Joseph

I built my portfolio with react and gsap https://davidjosephnwosu.com/. However, i get a weird behaviour only on mobile devices specifically on an iphone (not tried on android). When i scroll down just a little and allow it roll, it automatically snaps to the top, even when i go to other sections on the same page, it automatically snaps to the top and doesn't allow other sections to be viewed. After several hours of debugging i noticed the issue is the way im using the scrollTrigger plugin. Im gonna try and paste the code here for you to see how i use the scrollTrigger plugin and let me know what my mistake is please. I would truly appreciate your response. const timeline = gsap.timeline({ scrollTrigger: { trigger: "#about", start: "top 80%", end: "top 30%", scrub: true, }, }); timeline.fromTo( ".about__me-image", { opacity: 0, x: "10vw" }, { opacity: 1, x: 0, ease: "power1.out" } ); timeline.fromTo( ".about__card", { opacity: 0, x: "10vw" }, { opacity: 1, x: 0, ease: "power1.out", stagger: 0.3 } ); timeline.fromTo( ".my-story", { opacity: 0, x: "10vw" }, { opacity: 1, x: 0, ease: "power1.out" } ); timeline.fromTo( ".lets-talk", { opacity: 0, x: "-2vw" }, { opacity: 1, x: 0, ease: "power1.out" } );