The 1980s remain a great source of inspiration for the world of web design. The decade that gave us Pac-man, MTV and the Rubik’s Cube offers tons of iconic imagery to give our work a nostalgic twist.
Let’s take a trip back in time and recreate this 80s-inspired scroll experience. Feel free to build along while you watch.
We’ll start with a blank canvas and change the background color to black.
Under Layout, select a grid with three even rows
Next, we’ll turn on advanced settings in the Inspector Panel to give us more customization control.
Now let’s change the height of each row to 100VH
Time to add some content, starting with our text elements and button. You can drag them from the assets library in the Add panel.
Let’s stack these text elements.
Align the stack to the center. And its items.
Now I’ll select the first text element and a 1 percent bottom margin.
Select the second text element and a 3 percent bottom margin.
And for the third text element, another 3 percent bottom margin.
Now let’s apply some entrance animations to the text. For the first element, we’ll choose Fade.
We’ll add a tilt animation to our second text element.
Then select the third text element and a fade animation
We’ll also add a fade animation to our arrow.
And give it a loop animation too. Select, Wiggle
We’ll adjust the animation’s settings so our repeat delay is 2.
Okay, now I want to add a 3D mouse effect to this entire stack.
We’ll adjust the settings. Let’s choose the "Follow mouse" for direction. Then, set its angle to 10, its distance to 30 pixels and velocity to 1.
Okay, now let’s enhance the ’80s vibes by adding the visual elements to our design.
We’ll select these two images in the top left and place them in a container.
In the Inspector panel’s Layout section, let’s adjust the container’s docking, setting the left and top margin to 3 percent. It means they’ll stay where we want them to for different breakpoints.
Now we’ll select this image in the bottom left and set its left margin to 3.5 percent and bottom one to 8 percent.
For the image in the top right, we’ll set its top margin to 2 percent and its right margin to 12.5 percent.
Finally, we’ll place the four images in the bottom right in a container.
Let’s change its docking and set its bottom margin to 10 and side margin to 1.
Next we’ll add a mouse effect to our container in the top left. Let’s choose Airy.
Adjust the animation, setting its angle to 25, distance to 250 pixels and velocity to 1.
Now we’ll add the same mouse effect to the image in the top right. Set its angle to 20, distance to 50 pixels and velocity to 1.
For the bottom left image, we’ll add an Airy animation again. Adjust the angle to 20, distance to 100 pixels and velocity to 1.
Back to our container in the bottom right... Like with the others, we’ll apply an airy mouse effect, adjusting the angle to 10, distance to 100 pixels and velocity to 1.
We’ll select the cell and change its position type to sticky.
Moving down to our second row, let’s add this MTV image. We’ll adjust its docking, setting its top margin to 3.5 percent and right margin to 1.5 percent.
Now let’s give it the Airy mouse effect we’ve been applying to our other elements. Adjust its angle to 20, distance to 30 pixels and velocity to 1.
We’ll also change its Position type to Sticky.
Okay, let’s scroll down to our third row and add this cellphone image. We’ll set its left margin to 11 percent and bottom margin to 5 percent.
Again, we’ll add an Airy mouse effect, setting its angle to 5, distance to 30 pixels and velocity to 1.
Okay, that’s a lot of adjusting settings, let’s take a look at where we’re at. Hit Preview. Nice! Plenty of movement AND’80s vibes.
Thanks for watching. You can join us for part two of this tutorial where we’ll continue to build this 80s-inspired scroll experience. See you there.
.png)
