0

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.

0 Answers0