Creating a Reversable Page Transition
The Fullstack Digital website showcases case studies using an expanding and reversing animation sequence. I built the site.
This article will primarily focus on the Javascript portion of the reversable animation and how to think through a front-end development problem like this.
The main challenge with this particular animation is that after a page is loaded via the animation, it must reverse to the original spot. This creates numerous challenges since there are many factors that must be accounted for.
Additionally, the work grid includes a featured and non-featured view.
A featured item looks like this:
A normal grid item looks like this:
Both grid animations must be reversable, despite varying in their layout.
The grid animation is powered by Javascript and Velocity JS. Velocity JS is an animation library that utilizes 60 frames per second for animations. You need 60 FPS for a fluid animation or the entire animation looks sloppy.
Conceptual overview
- When a grid item is clicked, we transition the inner image from being relatively positioned to the grid to absolutely positioned to the entire window.
- Then, the image will need an X, Y, and width transform that is identical to the following page.
- After the transform has completed, the next page needs to load (via Ajax).
- When a back button or the X button is pressed, the animation must reverse to identically match the original state.
First challenge: calculate the starting animation position for each grid item.
Our grid will either have a row of 2 (for the normal grid), or a row of 1 (for the featured grid). We must account for mobile, tablet, and desktop. Each screensize has a slightly different layout for the grid and each grid item.
When we click a grid item, the actual image is transformed out of the grid.
Here’s what our starting values look like: