how to avoid scrolling gaps between blocks?

[sagexiang]

If a web page has multiple blocks, and the blocks contain content that needs to be animated, use ScrollTrigger the animation. Each block is fixed at the top of the window when scrolling, how to avoid scrolling gaps between blocks? I want the next block animation to be executed immediately when the previous block animation ends.

[mvaneijgen]

The easiest solution is pinSpacing: false, on your ScrollTrigger object, but you'll find that then thing start overlapping, which is probably not what you want. 

 

You could also wrap all your ScrollTrigger elements in a parent div, which gets pinned, this will keep all element stuck with each other, but better yet create one big ScrollTrigger with all the animations you want in them and follow them up one by one.

 

These are some suggestions, but it is hard to say without seeing any code, I'm just guessing here. If you could provide a minimal demo you'll see you'll get much more useful suggestions on these forums

[sagexiang]

such as this URL ：http://www.shmcjz.cn/soshow/

I want each "section" element is fixed at the top of the window when ScrollTrigger. how to avoid scrolling gaps between "section" element?

[mvaneijgen]

What have you tried already? We love to see minimal demo's, that way we can see your thought process and thus better help you. 

 

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

 

✨ A demo speaks 1000 words ✨