Geek Culture
Published in

Geek Culture

Recreating page piling in React for your websites without extra libraries

A fancy effect to use on a personal website

Recently I came across the personal website of a former classmate. Her website blows mine out of the water, since I have absolutely no eye for design. What I do have is a curious mind and the willingness to build on good ideas. One particularly good idea was this transition effect:

A screencap of https://w3hubs.com/Full-Screen-Scrolling-Using-Page-Piling-js/; I avoided using my former classmate’s site to preserve her anonymity

By the way, she was using the pagePiling.js jQuery plugin.

I like it. Let’s recreate it ourselves with only React libraries and web APIs.

Why recreate instead of using the plugin? Mixing jQuery with React is a messy affair. Plus, I like the challenge. Maybe we’ll learn something.

Requirements

You can play around with it yourself at the pagePiling.js library page. Since pagePiling.js is an open source, community-maintained library and I’m writing a weekend project, I’ll settle for the following minimum requirements:

  • There will be a React component that accepts a list of page sections as children
  • The component displays one section at a time
  • Scrolling past the top or bottom of the page navigates you to the next section
  • The transition to a previous section slides the section down
  • The transition to a later section moves the section up
  • There should be a way to update the URL so that refreshing the page should return you to the section (i.e. it defaults to the section designated in the URL)

Code

Check out the following:

Explanation

The component can be broken down into the following:

  • Absolute positioning and min-width and min-height that makes a single page section cover the whole viewport means that we only display a single section at once.
  • Transition components from the react-transition-group library, combined with the Web Animations API, form the animations for moving a page up and down. (It is not possible to use CSS transitions for this since the animations are different depending on how the page is changing.) The Transition components wrap around each child of the PagePiling component.
  • To avoid extra changes while the page is animating a transition, an extra transitioning boolean tracks whether it is changing, set to true before an animation and false when the animation ends.
  • Each section tracks two classes of events that indicate scrolling — wheel events for desktop users and touch events for mobile. Touch is a combination of touchstart and touchmovetouchmove in order to track whether the scroll is going up or down.
  • The component tracks the currently viewed section and the previously viewed section. From that, it can figure out whether the page is navigating up or down. This direction is passed down to PagePilingSection components, which use it to decide which animation to play.
  • A simple callback onViewChange triggered whenever the section changes and an initialView prop, combined with reading and writing to the URL, lets the component preserve its state on refresh.

Conclusion

Honestly, “page piling” isn’t a difficult effect to achieve ourselves. Mixing react-transition-group with Web Animations API is probably the biggest hurdle for most people. There are many further improvements that we can make on top, so feel free to fork or copy the code as-is. As it stands as a learning experience, I discovered the wheel event from this project, and I hope that either the code or this write-up can be of help to you too!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store