Jump to content
Search Community

Laggy page (ScrollMagic + GSAP)

leleo test
Moderator Tag

Recommended Posts

Hi all.

 

I have finished my company's website using GSAP to animate some elements.

 

They look just as I wanted, and I love it, but it does seem to have been causing some laggy scrolling and animations.

I thought it had something to do with the initial transform properties of the leaves, but disabling it didn't help at all.

 

Please have a look at https://twocan.design and try to see what it is.

 

Huge thanks in advance, and let me know I can provide any other type of info to help.

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Hey leleo and welcome to the GreenSock forums! It's generally best to create a minimal demo of the issue so that the thread can be more useful to people who look at the thread later. Using a live site like what you're doing makes it susceptible to being changed (like if you fix the issue or update the page design). 

 

If you open up your developer tools and go to the performance tool you can see that there are some updates to the layer tree, recalculating styles, laying out, and then more updating the layer tree before it finally paints. This is likely due to your animation of the widths of the images. I highly recommend using scale instead which doesn't cause all of the reflow. 

 

Another performance improvement you can make is to drop ScrollMagic :) It's not a GreenSock product and we don't really recommend using it. You can do the same type of animation on scroll without it. Here's a simple demo on how to do so: 

See the Pen dyoOgYj by GreenSock (@GreenSock) on CodePen

That's probably not a big cause of issue in this case, I just really don't like the library.

 

I also noticed that you're using GSAP version 3.1.1. Why not upgrade to the latest and greatest, version 3.2.4?

  • Like 5
Link to comment
Share on other sites

Hi ZachSaucier,

 

Thanks a lot for all the help. Before I changed the images' width property, I tried doing it with scale. Problem is, it looks like the orientation gets all messed up, don't know why.

 

Following your advice, I did a codepen copy of the website (minus the images) for you to see. Notice the (horribly) colored images on the right of the screen when you scroll.

 

See the Pen poJaZrZ by leleoalmeida (@leleoalmeida) on CodePen

 

Regarding ScrollMagic, thanks for showing me that it is possible to do it with GSAP natively! I'll definitely take a look into it.

 

Thanks once again for the help.

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