I created a timeline animation which runs on click event. Animations are working smoothly only after few refresh in most of the browsers.
Below is my function with timeline.. function exploreTimeline() {
gsap.timeline() .
to("body", { position: "static", overflow: "auto" }) .
to(".intro-content", { duration: 0.3, autoAlpha: 0.01, marginLeft: 50, ease: "power1" }, 0) .
to(".intro-content", { duration: 0.8, height: 0, marginBottom: 0, ease: "power2.in" }, 0) .
to(".intro-section", { background: "none" }, 0) .
to(".globe", { filter: "blur(5px)" }, 0) .
to(".magical-slider-container", { duration: 0.8, bottom: "5%", ease: "none", onComplete: () => { ScrollTrigger.refresh(); } }, 0)
}
