leleo Posted March 11, 2020 Share Posted March 11, 2020 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 More sharing options...
ZachSaucier Posted March 11, 2020 Share Posted March 11, 2020 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? 5 Link to comment Share on other sites More sharing options...
leleo Posted March 11, 2020 Author Share Posted March 11, 2020 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 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