Pinned section. How can I control when the next following section starts scrolling from bottom?

[TCharli 0 Likes (Newbie)]

I have a section with the height of 100vh and pin it as follows:

 

ScrollTrigger.create({
trigger: ".styleselectcontainer",
start: "top top", 
pin: true, 
pinSpacing:false,
});  

 

Directly after that follows the next section with normal scrolling. How can I control that this section does not scroll directly above the pinned section when the pin fires? I want to achieve that the user has to scroll/swipe a little bit until the second section starts scrolling.

[Trapti 178 Likes (Specialist)]

Hey, Welcome to the forum!
It is recommended to create minimal demo of the problem.

here is sample pen adjust the end value for how much you wanna let user scroll the first section.  

See the Pen d2f8c413883bab0a26134845e337fe10?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

[TCharli 0 Likes (Newbie)]

Perfect, that's what I was looking for! Thanks for the quick help!