krisxtina Posted July 7, 2022 Share Posted July 7, 2022 Hello! I have some problems with understanding, but at first I tell you my scenario. First hero has height 100vh, while scrolling, the background blurs and text moves. After, the second content section appears by fade, and I need to create another scrolltriggers to animate elements in it. So, when the second section appears, I want that dark background on circles start scale, after this animations ends, I can continue scroll down. I try to pin exSearch section, but it jumps, I don`t understand why. Help me please, I`m not sure that functions before are correct, maybe they can create this problem. See the Pen rNdxEZM by Kisa777Zaika (@Kisa777Zaika) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 7, 2022 Share Posted July 7, 2022 Hey there! I'm more than happy to take a look at this for you - but could I ask that you tidy up your demo a little. There's a lot of code here and it's quite disordered. Please can you remove any code that isn't absolutely essential to understanding the issue. Thanks so much! I'll pop back and check on this in a bit. Link to comment Share on other sites More sharing options...
krisxtina Posted July 7, 2022 Author Share Posted July 7, 2022 9 minutes ago, Cassie said: Hey there! I'm more than happy to take a look at this for you - but could I ask that you tidy up your demo a little. There's a lot of code here and it's quite disordered. Please can you remove any code that isn't absolutely essential to understanding the issue. Thanks so much! I'll pop back and check on this in a bit. Ah, sorry, I was in a hurry to tell about my problem xD I do it now. Link to comment Share on other sites More sharing options...
krisxtina Posted July 7, 2022 Author Share Posted July 7, 2022 15 minutes ago, Cassie said: Hey there! I'm more than happy to take a look at this for you - but could I ask that you tidy up your demo a little. There's a lot of code here and it's quite disordered. Please can you remove any code that isn't absolutely essential to understanding the issue. Thanks so much! I'll pop back and check on this in a bit. Done Link to comment Share on other sites More sharing options...
Cassie Posted July 7, 2022 Share Posted July 7, 2022 Hey there! There's still a ton going on here and it feels like there's a lot of overcomplication. I'm not really sure what the runSectionMove is doing. It looks like maybe it's been copied from another pen? You could just do this with a pin and get rid of all the fixed positioning in your CSS. Bonus being that if a user doesn't have JS enabled the page will still flow normally. You have a lot of transforms in your CSS which can often cause complications too. This is simplified down a bunch - maybe it's a better place to start you off? See the Pen dymMbzo?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
krisxtina Posted July 7, 2022 Author Share Posted July 7, 2022 45 minutes ago, Cassie said: Hey there! There's still a ton going on here and it feels like there's a lot of overcomplication. I'm not really sure what the runSectionMove is doing. It looks like maybe it's been copied from another pen? You could just do this with a pin and get rid of all the fixed positioning in your CSS. Bonus being that if a user doesn't have JS enabled the page will still flow normally. You have a lot of transforms in your CSS which can often cause complications too. This is simplified down a bunch - maybe it's a better place to start you off? Omg, it looks so hot! Thank you! I`ll go study Link to comment Share on other sites More sharing options...
krisxtina Posted July 7, 2022 Author Share Posted July 7, 2022 53 minutes ago, Cassie said: Hey there! There's still a ton going on here and it feels like there's a lot of overcomplication. I'm not really sure what the runSectionMove is doing. It looks like maybe it's been copied from another pen? You could just do this with a pin and get rid of all the fixed positioning in your CSS. Bonus being that if a user doesn't have JS enabled the page will still flow normally. You have a lot of transforms in your CSS which can often cause complications too. This is simplified down a bunch - maybe it's a better place to start you off? I have a question. When I scroll back, my text section start scrolling down, how I can avoid it? Link to comment Share on other sites More sharing options...
krisxtina Posted July 7, 2022 Author Share Posted July 7, 2022 And why on mobile phone it seems that fps on pinned section is not good? Link to comment Share on other sites More sharing options...
Cassie Posted July 7, 2022 Share Posted July 7, 2022 You're animating a filter - that's notoriously bad for performance I'm afraid! Link to comment Share on other sites More sharing options...
krisxtina Posted July 12, 2022 Author Share Posted July 12, 2022 On 7/7/2022 at 11:24 PM, Cassie said: You're animating a filter - that's notoriously bad for performance I'm afraid! Thank you very much for your codepen. I was working a lot, and now I have enough great result! 1 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