When using Safari on an iOS device, a website I'm working on scrolls to top automatically whenever I tried to scroll down. I found the issue was due to ScrollTrigger.js which I have used to add scroll animation to a svg in HOW? section. The website is working fine in other browsers.
gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, MotionPathPlugin);
gsap.defaults({ ease: "none" });
const barytdpulses = gsap.timeline({
defaults: {
scale: 1,
autoAlpha: 1,
transformOrigin: 'center',
ease: "elastic(2, 1)"
}
}).to(".ytdbartext01", {}, 1.0)
.to(".ytdbartext02", {}, 4.90)
.to(".ytdbartext03", {}, 5.35)
.to(".ytdbartext04", {}, 6.35)
.to(".ytdbartext05", {}, 7.35)
.to(".ytdbartext07", {}, 5.60)
.to(".ytdbartext06", {}, 15.60)
const mainytdbar = gsap.timeline({
scrollTrigger: {
trigger: "#ytdsvgbar",
scrub: true,
start: "top center",
end: "bottom center"
}
}).from(".theytdBar", { drawSVG: 0, duration: 2.0 })
.from(".theytdBarone", { drawSVG: 0, duration: 3.1 })
.from(".theytdBartwo", { drawSVG: 0, duration: 3.3 })
.from(".theytdBarthree", { drawSVG: 0, duration: 3.6 })
.from(".theytdBarfour", { drawSVG: 0, duration: 3.9 })
.from(".theytdBarfive", { drawSVG: 0, duration: 4.3 })
.add(barytdpulses, 0)
I want to keep the plugin as it is working fine in other browsers.