Traditional CSS keyframe animation can be tricky, but luckily Webflow makes it pretty easy. In this article I’ll show you how to make an easy loading screen animation. The final product is viewable here.

Weird frame rate lol I promise this looks smooth in person.

We’ll start by adding a new Page Trigger animation. This type of animation is triggered by events in the actual page (in this case when the page is finished loading), versus Element Trigger animations which start when an element is interacted with/scrolled into view.

Gatsby-plugin-layout is a great way to have a persistent layout component that stays mounted between pages, but what if we also want to pass props from our layout to pages/components and vice-versa? There are a few ways to go about it, but on a recent smaller project I opted for React Context. Note: this article will assume you already have gatsby-plugin-layout added to your project — if not, don’t worry! It’s super simple, just head over to their github for instructions.

The first step is adding a file to store our data in. In your components folder, create a file…

Simple fade-in when a component enters the viewport via horizontal scroll.

Framer Motion is such an intuitive and easy-to-use animation library that I’m honestly a little surprised it doesn’t have built-in tracking for whether a motion component is in the viewport. It can tell us whether a component is present in the React tree or how far we’ve scrolled through an element/viewport, but none of those are really ideal for triggering animations at the exact moment an element enters the viewport. Luckily this functionality is pretty easy to implement using react-intersection-observer. …

In December 2018, Google changed their autoplay policy regarding web audio, requiring the user to interact with the page before any audio is played. There are some exceptions to this based on user preferences (and also some potential workarounds involving the use of iframes), but in the interest of having a cool load screen I’ll show you how I tied that into enabling autoplay in my latest project.

Cool, right???

Start by creating a new folder in the src folder of your project called “audio”, and add your audio files to that folder. Then create an AudioPlayer.js …

A letter-by-letter text reveal can be a fun way to highlight information you want the user to read, and is easily achievable in React using variants in Framer Motion.

  1. Awwwards

First up is a well-known source of inspiration for frontend developers everywhere. Awwwards highlights the best of the best when it comes to web design, and their collections page has inspiration for every type of element you could want on your site.

2. Lapa

While creating my first portfolio I spent a lot of time browsing other developers’ portfolios as a source of inspiration. Here are five I found particularly cool:

  1. Lewis Atkins

Lewis’s portfolio uses a fun concept for a landing page, allowing you to draw on his face before exploring the rest of the site. The links also have a rainbow hover effect that adds a bit of excitement to the black & white color palette. Definitely a good example of how a little creativity can go a long way.

2. Jesper Landberg

Framer Motion is a great way to add animation to a React project, and Gatsby Link makes linking between pages a breeze. In this article, I’ll show you how I combined the two to create the page transitions I used on my portfolio site.

Start by installing Framer Motion and importing a motion component to your starting page. For our link component, we’ll be using Gatsby Plugin Transition Link, and will need to import TransitionLink and TransitionState to our starting page as well. …

Note: this article was adapted from Wrong Akram’s video tutorial. If you find this content helpful be sure to check out his channel.

Skew scrolling is an easy way to give your website’s design a quick boost. A demo of the project we’re going to create can be seen here, and the source code (along with a starter branch) can be found here. I recommend using the starter branch to follow along.

To get started, in our App.js file we’ll return a main div with class name “App”, which contains a nested div with class name “scroll” that’s mapping over…

Part 2 of a quick reference guide to some basic Sass concepts.

Sass comes equipped with built-in modules that contain useful functions. Here are some examples from the sass:color module.

  • fade-out takes a number between 0 and 1 and decreases opacity by that amount:

Brad Carter

Frontend Developer/UI Designer in Austin, TX

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