PSMJonas Posted May 23, 2022 Share Posted May 23, 2022 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 More sharing options...
PointC Posted May 23, 2022 Share Posted May 23, 2022 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. 2 Link to comment Share on other sites More sharing options...
PointC Posted May 23, 2022 Share Posted May 23, 2022 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. 2 Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 23, 2022 Share Posted May 23, 2022 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 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now