Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

Lagging animation on first run

Recommended Posts

Hey,

Why does the animation have a bit of lag/performance issue (not sure what to call it lol) on the first run? Like there is a stutter when the menu expands the first time :) 

See the Pen vYYjPeX by daniel-hult (@daniel-hult) on CodePen

  • Like 1

Share this post


Link to post
Share on other sites

Hey Daniel.

 

Most likely this has to do with the browser trying to optimize. That's often times the case when something (especially related to images/masking/etc.) isn't working the first time but is after the first time. 

 

Since you have autoAlpha: 0 on your image (that's set by GSAP) the browser is probably waiting to get ready to rending this. But when you open it it gets a little stuck trying to render it. You can test this by commenting out the .set() that gives it autoAlpha: 0. That seemed to fix it to me.

 

A work around is to use a really small value instead. Like autoAlpha: 0.01. That way there'e no risk of people noticing the difference but the browser has a reason to consider it a little more initially.

 

See the Pen xxxjoXK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Make sense?

  • Like 2

Share this post


Link to post
Share on other sites

I see no lag or stutter on the first run here in Safari and Firefox on MacOS 10.15.

 

I do see a stutter on the first run here in Chrome on MacOS 10.15, although I'm not sure why. It does have something to do wit the image in the right column. Removing that image removes the stutter.

 

EDIT: Whoops! I submitted this hours ago, but it just went through (probably an issue on my side). The amazing @ZachSaucier has got you covered though!

  • Like 2

Share this post


Link to post
Share on other sites

@Shaun Gorneau I kept waiting for you to post, but then I decided it had been long enough waiting :) 

  • Like 1

Share this post


Link to post
Share on other sites
Just now, ZachSaucier said:

@Shaun Gorneau I kept waiting for you to post, but then I decided it had been long enough waiting :) 

 

Aye aye aye ... yeah I have some network issue going on over here. Hopefully I get it cleared up soon!! 

Share this post


Link to post
Share on other sites

Thank you! That fixed it :D

What is the difference between setting it to 1 vs 0.01? Won't it be the same thing happening behind the scenes?

Share this post


Link to post
Share on other sites
2 hours ago, Daniel Hult said:

What is the difference between setting it to 1 vs 0.01? Won't it be the same thing happening behind the scenes?

The difference is that with a very low but non-zero opacity, technically something is supposed to be shown on the screen, even if it's visually no different, so the browser can't cut corners in rendering it (or preparing to render, which is what we care about in this case).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×