Like many of you, I have put work, family, and social obligations on hold to saddle up in Rockstar Game’s latest entry to the Red Dead Redemption franchise. I’m a huge fan of western mythology (and being anti social) so this game is a perfect fit for me. Luckily for my clients, I play the game on an Xbox connected to a projector which is rendered useless during the day due to the sun shining through 15 foot windows in my apartment. It’s in moments like this that I dream about playing the game and recreate elements of the interface in Codepen.

Seeing the loading screen for the first time, immediately triggered me to think about a Codrops article from 2016 on building transition effects with CSS masks. Naturally, I just made a mental note because I was about to invest several hours in the actual game... Well, the sun is now shining and I put together a simple Codepen which utilizes the CSS mask animation technique with a Photoshop filtered tintype photo of myself. Let’s break it down.

The HTML is very simple and includes a #photo holder div that includes two additional divs. The #normal div will hold the outcome photo and the #invert div will hold the pre-developed invert photo. The #invert div is placed on top and we’ll use the CSS mask to ink reveal the #normal div underneath.

<div id="photo">

<div id="normal"></div>

<div id="invert"></div>

</div>

Each of these divs will receive the same background image but the #invert div will also include an invert and grayscale filter.

#photo div{

background: url('lee-morgan.jpg');

background-size: cover;

} #invert{

filter: invert(1.0) grayscale(1.0);

}

Following the Codrops article, I put together a new ink reveal sprite sheet in After Effects which I feel better mimics the effect in RDR2. Bonus tip, I used the following Imagemagick command to stitch together a horizontal sprite sheet from a directory of frames which were exported from After Effects.

convert *.png +append sheet.png

I can then apply that mask to the #invert div. Multiply the amount of frames in your animation by 100 to get your mask size.

#invert{

mask: url('sheet.png');

mask-size: 7000% 100%;

}

While the CSS animation looks like it would simply slide the mask position over from one side to another, the real magic happens in the steps command included in the animation declaration. This allows the mask to step it’s position evenly over the duration of your animation rather than tween it.

#invert{

animation: mask 5s steps(69) infinite alternate;

} @keyframes mask{

from{

mask-position: 0% 0%;

}

to{

mask-position: 100% 0%;

}

}

Finally, I added one additional CSS animation to fade and blur the effect and attached it to the #photo div. This gets it a bit closer to what is in game.

#photo{

animation: blur 5s infinite alternate;

} @keyframes blur{

from{

filter: blur(3px);

opacity: 0;

}

to{

filter: blur(0px);

opacity: 1;

}

}