James Dawson
Web Developer in Chicago, IL

Real Cost of Beauty Ideals

Dove

Animation showcase of research on the cost of toxic beauty standards. Part of Dove's End Appearance Hate campaign.

My Role

Led a three-person front-end team, established architecture, divided responsibilities, crafted a lot of really cool bespoke animations.

Highlights

Falling Words

There are a few cool things going on here, all on scroll:

  • a reusable animated underline component
  • words falling into “random” places
  • a slight-of-hand switch of the white text as the yellow cards are pushed upward

Tweened Numbers

How do you scroll from 0 to 500 billion? Use Greensock to tween a value, it turns out.

I also love the angled fill for the numbers. The designers brought some creative challenges, and I was happy to bring the technical solutions.

Color Clip

The site ends with one of my favorite effects: animating text upward while clipping it to appear as though the next section changed its color. When I made this, I kept thinking to myself that this must be how magicians feel to accomplish illusions this smooth.

Tech Stack

Frameworks

  • Nuxt
  • Vue.js

Libraries

  • GSAP

Fundamentals

  • CSS
  • HTML
  • JavaScript
  • SCSS

Services

  • Google Analytics

Responsibilities

  • Architecture
  • Animation
  • Component Creation
  • Mentoring Developers
  • Pull Request Reviews
  • Styling
  • Task Management