Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kevchcm

How to move adjacent sections when doing Parallax effect

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×