Jump to content
Search Community

Animations working smoothly only after few refresh

nikith test
Moderator Tag

Recommended Posts

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)


Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...