kevchcm Posted February 20, 2021 Share Posted February 20, 2021 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 More sharing options...
ZachSaucier Posted February 20, 2021 Share Posted February 20, 2021 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 More sharing options...
kevchcm Posted February 25, 2021 Author Share Posted February 25, 2021 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 More sharing options...
ZachSaucier Posted February 25, 2021 Share Posted February 25, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now