James proposing to Julia in front of a cartoon Austin skyline.

Our Wedding Storybook

Most people want to make their wedding day as special as possible. I saw our wedding website as a special opportunity to use my craft for my now-wife.

I wanted to capture the feeling of reading a pop-up fairytale without the UX inconveniences of scroll-jacking and parallax. It was also important to keep in mind who these guests were. There were a lot of older relatives that felt challenged by complex interactions.

I ended up creating a one-to-one relationship between the user’s scroll position and the animations. This provided guests direct control of the animation position. The technology that made this possible was a combination of React’s inline styles and CSS animations.

The biggest challenge for me was the transition of the sky and sun. A visual designer friend was able to help teach me how sunsets are more of an opacity fade instead of a physical transition of colors. Guests ended up loving the animations and the minimal content.

Portrait of James Y Rauhut

James loves to design, code, and talk about weird web apps from ATX. He also writes snippets from the third-person.
@seejamescode

More Good Stuff

Cover Image for A Super Unofficial Next.js Conf Primer

A Super Unofficial Next.js Conf Primer

October 26th, 2020

In only 25 minutes, get a quick intro to Next.js before all of the cool talks!

Cover Image for How to Align Your Team on the Need for Accessibility

How to Align Your Team on the Need for Accessibility

August 13th, 2019

Considering or planning to teach your team about web accessibility? Here is a free presentation and guide to help them get on the same page.

Cover Image for Flawlessly Upgrade Your App Over Time with Grid Wiz

Flawlessly Upgrade Your App Over Time with Grid Wiz

November 13th, 2018

Make a CSS grid framework with custom browser support at the snap of a function.

Cover Image for Rapid Responsive Design

Rapid Responsive Design

August 25th, 2018

How could we do responsive design faster?

Cover Image for The Bad Toons You Will Meet in Web Development

The Bad Toons You Will Meet in Web Development

August 16th, 2018

The need for more web developers means that new faces will enter our industry every day.

Cover Image for Death to the Boring Design System

Death to the Boring Design System

April 24th, 2018

Have we gotten into era where we do not push the potential of a design system.? Let’s explore how efforts, like CSS​ Grid, are allowing us to push what a design system does!

Cover Image for Your Spotify at SXSW

Your Spotify at SXSW

February 22nd, 2018

Find all the artists in your Spotify song library that will be at SXSW.

Cover Image for CSS Gridish

CSS Gridish

January 22nd, 2018

Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.

Cover Image for Winning Your Users' Trust with Performance UX

Winning Your Users' Trust with Performance UX

November 2nd, 2017

If you don’t have your users' trust, then you don’t have a returning user. So how do you tell the user that your product is serving them as fast as possible?

Cover Image for IBM Plex

IBM Plex

October 3rd, 2017

How do you distribute a new typeface for a 400,000+ employee company? Open-source it!

Cover Image for Global Upvote

Global Upvote

September 14th, 2017

Top voted stories across the web, summarized and updated every sixty seconds.

Cover Image for CSS-in-JS is Insane[ly Good]

CSS-in-JS is Insane[ly Good]

August 22nd, 2017

Stop putting CSS in your JavaScript! Inline styles are terrible for performance! You are ruining web development! Or is it one of the best things ever?

Cover Image for Is Texas Back Yet?

Is Texas Back Yet?

August 11th, 2017

One meme about college football turned into a website for fans to rally around. Little did I know, the team would excel expectations and the site would crash!

Cover Image for A Day at IBM

A Day at IBM

June 16th, 2017

A day-in-the-life video for FreeCodeCamp about working at IBM.