Real Cost of Beauty Ideals

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
Libraries
Fundamentals
Services
Responsibilities
- Architecture
- Animation
- Component Creation
- Mentoring Developers
- Pull Request Reviews
- Styling
- Task Management