What is the easiest way to snap a section to top when it gets near?

[bntratox]

I have multiple sections on my page. 

Html:

<header></header>

<section>
  Content1
</section>

<section>
  Content2 
</section>


<footer></footer>

Css: 

section{
width:100%;
height:100vh;
}

How can I use gsap to snap them on top of the screen when they come near?

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[bntratox]

3 minutes ago, GSAP Helper said:

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

See the Pen wvXRZym by mertcanuslu (@mertcanuslu) on CodePen

 

 

Lets say I've scrolled this much but left that amount of space. I want the section to automatically go top and snap.

Same for all other divs.

[mvaneijgen]

Can you please show what you've already tried ? That way we can better understand with what you're struggling with and thus better help you. 

 

There are a lot of really great topics around here focusing on snapping using ScrollTrigger, so be sure to check those out if you need some inspiration on where to start. Here are just a few, but there are much more.

 

 

[bntratox]

1 minute ago, mvaneijgen said:

Can you please show what you've already tried ? That way we can better understand with what you're struggling with and thus better help you 

 

 

See the Pen wvXRZym by mertcanuslu (@mertcanuslu) on CodePen

[Rodrigo]

Hi,

 

Maybe you are looking for something like this:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 

Hopefully that's enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[bntratox]

1 hour ago, Rodrigo said:

Hi,

 

Maybe you are looking for something like this:

 

 

 

Hopefully that's enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

See the Pen QWxYNYb by mertcanuslu (@mertcanuslu) on CodePen

 

When I make top and bottom divs not snapped and make them seperated from the animation things get broken.

For example in the codepen above I've made the blue and green divs not included in the animation.

When I scroll just a little bit in the blue section it immediately starts to animate the red div to top of the screen. But I don't want this, what I want is when red div becomes %85 visible like in the image below, I want it to start animating then.

Btw I just noticed that green div is completely missing.

 

[Rodrigo]

Hi,

 

Sorry for the delayed response.

 

This seems to be closer to what you're after:

See the Pen rNKRaPg by GreenSock (@GreenSock) on CodePen

 

Is not 85% percent of the slide but is at least something better. As you can see there is some commented out code at the end. That's an approach that I was trying but even though the math checks out, the snap value of the ScrollTrigger instance doesn't seem to match when factoring 85%. I'm sure I'm missing something super simple, but I can't put my finger on it yet and I wanted to get some sort of answer so you have something to work with.

 

I hope to find a better solution or perhaps you can extending from the code in the example.

 

Happy Tweening!