Jump to content
Search Community

Gsap - low performance when scrolling down

Lichay test
Moderator Tag

Recommended Posts

Gsap - low performance when scrolling down.

 

if you scrolling down gsap stack for some second 

why it happened ? it should be good performance but it feel very bad 

when it touch 

imgContainer and go inside flex it stack 

How can I fix this issue Thank for helping :-)

comment: 'when you try it after sometimes it work smoother, but still bad experience for customers'

https://codesandbox.io/s/gsap-low-performance-lqllf?file=/src/app/app.component.html:268-272

 

Link to comment
Share on other sites

 

I can only see lag, when scrolling down the page, while the pictures are still being loaded.

Once they have completed loading and are set on the page, there is no lag I can notice.

 

So my guess would be, this is related to the loading of the pictures.

In this case, if you wanted to prevent this from happening, you'd have to make sure to show some sort of loader before making the site accessible for scroll.

 

  • Like 2
Link to comment
Share on other sites

19 minutes ago, akapowl said:

 

I can only see lag, when scrolling down the page, while the pictures are still being loaded.

Once they have completed loading and are set on the page, there is no lag I can notice.

 

So my guess would be, this is related to the loading of the pictures.

In this case, if you wanted to prevent this from happening, you'd have to make sure to show some sort of loader before making the site accessible for scroll.

 

what do you mean ? without gsap it work well

Link to comment
Share on other sites


Sorry, maybe there is something I don't get.

 

Of course it would work well without GSAP, because there would be no animation, that could be lagging, if you didn't use GSAP.

 

But again: 

I only see some lag, when scrolling down, while the pictures are still being loaded into the page - which is probably to be expected.

When the pictures are fully loaded, I don't see any lag.

 

Also, there is no lag, if you remove the pictures, which makes me even more certain,

that this is related to the loading of the pictures and their injection into the page.

 

https://codesandbox.io/s/gsap-low-performance-forked-tie50?file=/src/app/app.component.html

 

 

  • Like 1
Link to comment
Share on other sites

15 minutes ago, akapowl said:


Sorry, maybe there is something I don't get.

 

Of course it would work well without GSAP, because there would be no animation, that could be lagging, if you didn't use GSAP.

 

But again: 

I only see some lag, when scrolling down, while the pictures are still being loaded into the page - which is probably to be expected.

When the pictures are fully loaded, I don't see any lag.

 

Also, there is no lag, if you remove the pictures, which makes me even more certain,

that this is related to the loading of the pictures and their injection into the page.

 

https://codesandbox.io/s/gsap-low-performance-forked-tie50?file=/src/app/app.component.html

 

 

without pictures this is isn't useful. better delete Gsap and use images.

but i want both of them if Gsap isn't support it i'll use another framework for my website

Link to comment
Share on other sites

Hey @Lichay

 

2 hours ago, akapowl said:

I only see some lag, when scrolling down, while the pictures are still being loaded into the page - which is probably to be expected.

 

That is absolutely correct.
If you use pictures like the YOGA with 5.6 mb, then it just takes some time to load.

 

 

 

 

Bildschirmfoto 2020-11-25 um 16.12.59.png

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Just now, mikel said:

Hey @Lichay

 

 

That is absolutely correct.
If you use pictures like the YOGA with 5.6 mb, then it just takes some time to load.

 

 

 

 

Bildschirmfoto 2020-11-25 um 16.12.59.png

if I use this pictures without GSAP I show well

moreover you can change this pictures and still have the same problem

Link to comment
Share on other sites

6 minutes ago, Lichay said:

moreover you can change this pictures and still have the same problem

 

In this demo, the page loads the probably highly optimized and thus small-in-filesize images from lorem-picsum and the lag is not noticable as it is in your version.

 

https://codesandbox.io/s/gsap-low-performance-forked-fkevy?file=/src/app/app.component.html

 

 

 

2 hours ago, Lichay said:

without pictures this is isn't useful. better delete Gsap and use images.

 

And you probably got me wrong on that. The demo I posted above wasn't meant as a solution but as an attempt to clarify, that the lag is related to the image loading and not to GSAP per se.

 

  • Like 3
Link to comment
Share on other sites

15 minutes ago, akapowl said:

 

In this demo, the page loads the probably highly optimized and thus small-in-filesize images from lorem-picsum and the lag is not noticable as it is in your version.

 

https://codesandbox.io/s/gsap-low-performance-forked-fkevy?file=/src/app/app.component.html

 

 

 

 

And you probably got me wrong on that. The demo I posted above wasn't meant as a solution but as an attempt to clarify, that the lag is related to the image loading and not to GSAP per se.

 

yes I can see it now but this still wired , because without gsap the images loading well.

Link to comment
Share on other sites

1 hour ago, mikel said:

Hey @Lichay,

 

Images with around 100 bytes would not be a problem.
To execute JavaScript code when the page has fully loaded - includes things like large images - you could

 



window.addEventListener('load', function () {
  alert("It's loaded!")
  
  ...
})

 

I did it and still don't work well 

stack in first load 

 

https://codesandbox.io/s/gsap-low-performance-lqllf?file=/src/app/app.component.ts

Link to comment
Share on other sites

GSAP doesn't slow down the load of the images at all. I think what you're seeing is just an illusion that makes you THINK it's GSAP-related.

 

It's beyond the scope of the help we can provide in these forums to do a whole performance audit on your project, but it looks like there's definitely something else going on that's not related to GSAP at all. If you do a performance profile, there are HUGE swaths of time getting eaten up by compositing layers (not GSAP-related) and a timer that's fired by zone.js, plus there's a lot of time eaten up by painting (way more than JavaScript execution), and you've got a box-shadow applied which is notoriously slow for the browser to render. You also have listeners set up for mouse events that could be very expensive, like if the user's mouse happens to be over one of the images as it scrolls by and you're simultaneously having the browser animate the translation and opacity while also scaling and scrolling and doing hit detection and composite box-shadow on several elements.

 

Also:

  1. Why are you using "-=" for the position parameter? That's invalid.
  2. ease: "Power0.easeNone" should be ease: "none"
  3. ease: "ease-in-out" is not a valid ease. Maybe you meant "power1.inOut"? 
  4. There is no point to animating scaleZ. I would definitely eliminate that. It's technically invalid. 

In short, I'm confident this issue has nothing to do with GSAP in particular. If you need more help with a performance audit, you may need to hire a freelancer who specializes in that. We'd love to help, but we just don't have the resources to do free performance audits for all the people in these forums. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

10 minutes ago, GreenSock said:

GSAP doesn't slow down the load of the images at all. I think what you're seeing is just an illusion that makes you THINK it's GSAP-related.

 

It's beyond the scope of the help we can provide in these forums to do a whole performance audit on your project, but it looks like there's definitely something else going on that's not related to GSAP at all. If you do a performance profile, there are HUGE swaths of time getting eaten up by compositing layers (not GSAP-related) and a timer that's fired by zone.js, plus there's a lot of time eaten up by painting (way more than JavaScript execution), and you've got a box-shadow applied which is notoriously slow for the browser to render. You also have listeners set up for mouse events that could be very expensive, like if the user's mouse happens to be over one of the images as it scrolls by and you're simultaneously having the browser animate the translation and opacity while also scaling and scrolling and doing hit detection and composite box-shadow on several elements.

 

Also:

  1. Why are you using "-=" for the position parameter? That's invalid.
  2. ease: "Power0.easeNone" should be ease: "none"
  3. ease: "ease-in-out" is not a valid ease. Maybe you meant "power1.inOut"? 
  4. There is no point to animating scaleZ. I would definitely eliminate that. It's technically invalid. 

In short, I'm confident this issue has nothing to do with GSAP in particular. If you need more help with a performance audit, you may need to hire a freelancer who specializes in that. We'd love to help, but we just don't have the resources to do free performance audits for all the people in these forums. 

 

Happy tweening!

1. "-=" doing that left and right be together.

2. I am copy it from doc.

4. I did scaleZ for more reality I am think it do something

 

I use mouse listeners because I try first use simple hover and Gsap block me - somehow can't use on same object Gsap + hover

Link to comment
Share on other sites

  1. If you want them both to be at the start of the timeline, then use 0 instead. "-=" is totally invalid. Relative values are like "-=1", for example. 
  2. Where in the docs did you see that? Can you provide a link? And were you looking at the v3 docs or the old v2 ones? 
  3. I don't understand your comment, but definitely remove scaleZ. 
38 minutes ago, Lichay said:

I use mouse listeners because I try first use simple hover and Gsap block me - somehow can't use on same object Gsap + hover

I'm curious what you mean by that. GSAP doesn't "block" anything that I can think of. Can you show me an example where GSAP is blocking you from doing a hover? 

  • Like 2
Link to comment
Share on other sites

23 minutes ago, GreenSock said:
  1. If you want them both to be at the start of the timeline, then use 0 instead. "-=" is totally invalid. Relative values are like "-=1", for example. 
  2. Where in the docs did you see that? Can you provide a link? And were you looking at the v3 docs or the old v2 ones? 
  3. I don't understand your comment, but definitely remove scaleZ. 

I'm curious what you mean by that. GSAP doesn't "block" anything that I can think of. Can you show me an example where GSAP is blocking you from doing a hover? 

1. I change to "<" do the same instead 0

2. https://greensock.com/docs/v2/Easing oh it older version good to now

3. done :-)

 

you can see the block on this 

See the Pen ZEpzNBW by lichaytiram (@lichaytiram) on CodePen

Link to comment
Share on other sites

Oh, right, that's not because GSAP is blocking anything - it's because you're creating logic issues by applying BOTH a CSS transition AND GSAP to the same element's properties. Remember, CSS transitions cause the browser to refuse to apply changes immediately to the properties. Instead, it introduces a delay during which it gradually moves to what was set. So, for example GSAP updates the property 60 times per second but the CSS transition says "NO, I won't apply that...I'm going to intercept it and make that gradually happen over time instead". So by the time GSAP's done with the animation, what actually gets rendered to the screen in the browser isn't at all finished. GSAP is doing its job, but your CSS transition is interfering. You should never apply both CSS transitions/animations and GSAP animation to the same properties at the same time. It's a logic thing, not a "GSAP blocking" issue. In fact, it's the opposite - the CSS transition is blocking GSAP's property updates from happening. 

 

Does that clarify things? 

  • Like 2
Link to comment
Share on other sites

2 hours ago, GreenSock said:

Oh, right, that's not because GSAP is blocking anything - it's because you're creating logic issues by applying BOTH a CSS transition AND GSAP to the same element's properties. Remember, CSS transitions cause the browser to refuse to apply changes immediately to the properties. Instead, it introduces a delay during which it gradually moves to what was set. So, for example GSAP updates the property 60 times per second but the CSS transition says "NO, I won't apply that...I'm going to intercept it and make that gradually happen over time instead". So by the time GSAP's done with the animation, what actually gets rendered to the screen in the browser isn't at all finished. GSAP is doing its job, but your CSS transition is interfering. You should never apply both CSS transitions/animations and GSAP animation to the same properties at the same time. It's a logic thing, not a "GSAP blocking" issue. In fact, it's the opposite - the CSS transition is blocking GSAP's property updates from happening. 

 

Does that clarify things? 

yep, anyway that why I did "addEventListener"

 

 

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