Using scrollTo to move page correctly

[scriptmunkee]

Hi,

In the simple attached code pen what im trying to achieve is:

• pin the header so the section element moves up as opposed to the page go down
• have the section fade in from a 0 opacity to full opacity
• have the functionality to finish the scroll if a user only half completes it

 

Where do i do this?

T.I.A. Chris

See the Pen VweXGYZ by scriptmunkee (@scriptmunkee) on CodePen

[ZachSaucier]

Hey Chris. 

1 hour ago, scriptmunkee said:

pin the header so the section element moves up as opposed to the page go down

I don't understand what you mean here. Can you please link to a page that has this effect or show a diagram of what you mean?

 

1 hour ago, scriptmunkee said:

have the functionality to finish the scroll if a user only half completes it

I assume you mean that the scroll position snaps to an end state?

 

It sounds like you want to use ScrollTrigger along with its pinning and snapping:

 

[scriptmunkee]

Thank you