How to move adjacent sections when doing Parallax effect

[kevchcm]

Hey guys, I have an issue an I'm looking for help. I have a page that has a parallax effect in all of the sections of a page whenever the user scrolls.

So there are this black text blocks that are separated but whenever you scroll one of the blocks moves up to be next to the one on top, the issue is that this is causing a blank space between sections of the page. 

I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well, basically follow that text block whenever it goes up. I try this by just using a yPercent on the sections below, but is is just causing a blank space to be left on the bottom of the page

Here is a link of how the animation should work https://drive.google.com/file/d/1EsKinyuID5buWKhQllRhE1Bmc6el5GTX/view and I left a codepen with the basic markup of my current pate.

Any help would be appreciated. 

See the Pen eYBERGe by godhandkiller (@godhandkiller) on CodePen

[ZachSaucier]

19 minutes ago, kevchcm said:

I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well

To do this with your current approach you'd have to translate all of the content below. 

 

It probably makes more sense to look at existing parallax implementations. There are some listed in the ScrollTrigger demos.

 

20 minutes ago, kevchcm said:

Here is a link of how the animation should work https://drive.google.com/file/d/1EsKinyuID5buWKhQllRhE1Bmc6el5GTX/view

That requires permission to view it FYI.

[kevchcm]

On 2/20/2021 at 1:52 PM, ZachSaucier said:

To do this with your current approach you'd have to translate all of the content below. 

 

It probably makes more sense to look at existing parallax implementations. There are some listed in the ScrollTrigger demos.

 

That requires permission to view it FYI.

Hey @ZachSaucier so I was able to do the animation by changing the section height, so all of the components below go up. I updated the codepen above to reflect this.

 

I have another issue, if I scroll down with a mouse, the animation on the black blocks looks very "jumpy", I'm seeing the same issue on the page in my server.

Is there a way to avoid this and make it smoother?

[ZachSaucier]

You can use a numerical scrub like scrub: 0.5 to make it animate the animation's progress to the target value over time.