Jump to content


Animation takes a long time to start

Recommended Posts

I have the problem that it takes a few seconds for my animation (timeline) to start. Unfortunately, I have no idea what could be the reason for this. I have already tried to set the delay to 0, unfortunately without success.




See the Pen PoQJPjW by jonasloerken (@jonasloerken) on CodePen

Link to comment
Share on other sites

I think you need to make this change on line 38

// switch this
var tl = gsap.timeline({paused: true, duration: 1});

//to this
var tl = gsap.timeline({ paused: true, defaults: { duration: 1 } });

Hopefully that helps.


  • Like 2
Link to comment
Share on other sites

I also see some CSS transitions in there, but I can't really tell if that is an additional problem since the demo has quite a bit to look through.

  • Like 2
Link to comment
Share on other sites

Agreed with @PointC,

Also, it looks like your fading in the nav for 1s then at .5s animating it in. Try this:

tl.to(this.nav.overlay, {autoAlpha: 1, ease: "power2.inOut"})
  .to(this.nav.container, {x: 0, ease: "power2.inOut"}, 0); // <-- start x transform at 0s into timeline 


  • Like 4
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.