Issue with pin with small height <section>

[Cody Ng]

Hi there,

 

From my codepen as below link, how to remove the bottom padding of section 2?

There will be animation inside the section 2.

I've tried many ways but no luck.

 

 

Thanks for advices.

See the Pen QWNjYoL by codyng (@codyng) on CodePen

[elegantseagulls]

Hi @Cody Ng

 

To remove this padding, you'll need to set pinSpacing: false  You'll also want to set position: relative with an appropriate z-index to keep it on top of the next section. 

[Cody Ng]

I would like to snap both section 2 and section 3 when scrubbing the animation in section 2.

And unpin both if the animation is finished. I don't want section 2 and 3 overlap each other.

Here is the wrong result: 

See the Pen VwavOqX by codyng (@codyng) on CodePen

I don't know how to do that with ScrollTrigger.

 

Thanks again.

[ZachSaucier]

48 minutes ago, Cody Ng said:

I would like to snap both section 2 and section 3

By "snap" do you mean "pin"? 

 

I think it'd be easiest to use a container for the sections you want to stay pinned during that portion:

See the Pen Yzqyobm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side notes:

• It's best to avoid animating properties like width because they're not performant. Stick to properties that are performant like scaleX instead.
• We highly recommend setting all of your transforms with GSAP because not doing so can lead to errors. See this post for more info: