Open in app

Sign In

Write

Sign In

Brad Carter
Brad Carter

19 Followers

Home

About

Feb 15, 2021

Getting Started with Animations in Webflow

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. We’ll start by adding a new Page Trigger animation. This type of animation is triggered by…

3 min read

Getting Started with Animations in Webflow
Getting Started with Animations in Webflow

3 min read


Feb 8, 2021

Passing Props between Layout and Children in Gatsby with useContext

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…

Gatsby

4 min read

Passing Props from Layout to Page in Gatsby with useContext
Passing Props from Layout to Page in Gatsby with useContext
Gatsby

4 min read


Feb 1, 2021

Using Intersection Observer and Framer Motion for Scroll-Based Animations in React

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…

3 min read

Using Intersection Observer and Framer Motion for Scroll-Based Animations in React
Using Intersection Observer and Framer Motion for Scroll-Based Animations in React

3 min read


Jan 25, 2021

Building an Audio Player in React

In December 2018, Google changed their autoplay policy regarding web audio, requiring the user to interact with the page before any audio is played. …

3 min read

Building an Audio Player in React
Building an Audio Player in React

3 min read


Jan 18, 2021

How to Animate a Text Reveal Effect in React with Framer Motion

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.

3 min read

How to Animate a Text Reveal Effect in React with Framer Motion
How to Animate a Text Reveal Effect in React with Framer Motion

3 min read


Jan 11, 2021

5 Sources of Web Design Inspiration for 2021

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

Inspiration

2 min read

5 Sources of Web Design Inspiration for 2021
5 Sources of Web Design Inspiration for 2021
Inspiration

2 min read


Jan 4, 2021

5 Inspiring Examples of Developer Portfolios

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: Lewis Atkins Lewis’s portfolio uses a fun concept for a landing page, allowing you to draw on his face before exploring the rest…

2 min read

5 Inspiring Examples of Developer Portfolios
5 Inspiring Examples of Developer Portfolios

2 min read


Dec 21, 2020

Page Transitions in Gatsby with Framer Motion

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…

3 min read

Page Transitions in Gatsby with Framer Motion
Page Transitions in Gatsby with Framer Motion

3 min read


Dec 14, 2020

How to add Smooth Skew Scrolling in React

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…

4 min read

How to add Smooth Skew Scrolling in React
How to add Smooth Skew Scrolling in React

4 min read


Dec 7, 2020

Sass/SCSS Concepts (pt. 2)

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:

4 min read

Sass/SCSS Concepts (pt. 2)
Sass/SCSS Concepts (pt. 2)

4 min read

Brad Carter

Brad Carter

19 Followers

UI/UX Developer in Austin, TX

Following
  • ✨ They Make Design ✨

    ✨ They Make Design ✨

  • Muzli

    Muzli

  • Fresh Frontend Links

    Fresh Frontend Links

  • Eric Elliott

    Eric Elliott

  • Ryan Seddon

    Ryan Seddon

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech