Jump to content
Search Community

Lagging animation on first run

Daniel Hult test
Moderator Tag

Recommended Posts

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 3
Link to comment
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
Link to comment
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).

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...