Scrolltrigger animation, pinned element jumps

[krisxtina]

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

[Cassie]

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.

[krisxtina]

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. 

[krisxtina]

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 

[Cassie]

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

[krisxtina]

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 

[krisxtina]

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?

[krisxtina]

And why on mobile phone it seems that fps on pinned section is not good?

[Cassie]

You're animating a filter - that's notoriously bad for performance I'm afraid!

[krisxtina]

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!