Veldin

Animated Cover: Melanie Martinez - Cry Baby

Cry baby

Fullscreen Link

Melanie Martinez's has a style in her songs that gives a view inside the dark moments in her life in a way that is almost whimsical, but at the same time very disturbing. I quickly fell in love with her and especially her album Cry Baby.This animated version of her album cover was made using CSS animations and some Jquery. Animated together with some art assets of the cover itself.

Starting out

I didn't do much animation yet with CSS so had to improvise a little to get it all to work. I started out by cropping the letters of the title.
After that I added a little 'idle' animation to the transparent letters. I sped it up from a 10 second animation loop to 2 seconds so its more visible.

The animation of all the letters are unique to the letter but have the same way of animating. Every letter gets skewed a couple degree on the X axis.

Melanie on a cloud

After that I just put the main part of the artwork in place; Melanie on a cloud. I just had to cut it out properly. Some edges needed to be hard while some needed to have a nice gradient.

Its way more visible if you put a different background colour under the image, but within the canvas it looks al right.

Tear tubes

The tears are split up in 5 separate streams like in the original cover. Each of the streams has its own cut-out of a tear as its background image. This background image gets animated to go from top to bottom of the tube. After the animation is finished the tube gets removed altogether.

paper effect

Every once in a while a glitchy paper effect is spawned somewhere within the canvas. With this effect I try and give the canvas a 'fake' feeling. To add to the effect I also put the opacity down to just 20%.

Background

The background consists of a static backdrop with an animated backdrop on top of it. This makes it look like there are multiple layers of clouds on the image whilst there is only one.

The animation of the background is the only thing that is not an infinite loop but is instead an long animation lasting longer than 11574074 days. I did this because it was impossible to seamlessly reset the animations on differed screen sizes.