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
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