Animations working smoothly only after few refresh

[nikith]

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)

}
 

[GreenSock]

Welcome to the forums, @nikith. 

 

It's very difficult to troubleshoot blind, but I'll offer a few comments: 

1. That sounds like a loading/caching issue (totally unrelated to GSAP). Like if you've got big images loading while you're also trying to animate, perhaps the browser is choking a bit until those assets are fully downloaded. On subsequent refreshes, it pulls them from the cache much faster. 
2. Animating margins affect document flow which is much harder on the browser than animating things like transforms. Again, this has nothing to do with GSAP. In 99%+ of the cases when someone says they're having performance problems, it's solely related to graphics rendering in the browser and is unrelated to GSAP. 
3. Animating filters like blur is VERY expensive. I'd strongly recommend avoiding that if you can. Again, it's all about the browser and how fast it can render graphics, so it has nothing to do with GSAP. 
4. You've got several .to() animations on properties that cannot be animated like position, overflow, and background: "none". Perhaps you meant to use .set()?

If you still need some help, please provide a minimal demo and we'd be happy to take a peek and answer any GSAP-specific questions. If you need more general consulting or a performance audit, that's probably something you'd need to get on a paid consulting basis.  

 

Good luck!