Netflix intro animation - Pure CSS

#css #html #showdev #sideprojects

Hey everyone,

Recently I've cloned the Netflix's intro animation using only CSS and I got some great feedback about it, so I thought it would be great to share a bit about the development process of the animation step-by-step.

So here we go!

HTML Structure

First I mapped the letters in Netflix's logo, and separated they so I could use it as a base reference for positioning the HTML elements later.

In the HTML, I've created a container with 4 subdivs named helpers, each helper is designated to be a 'side' of the animated letter, for example, animating the N letter, 3 helpers are going to be used, because the N is divided in 3 individual parts, like this 👉 I\I

That being said, considering that in the container div we have an attribute named 'letter', I've used the image we export in the previous step, and it placed exactly where the helper divs should be for each value in the 'letter' attribute, wich supports all letters from the 'NETFLIX' name.

The Animation

Now it's time to focus on the animation part. The animation is composed by three main steps, the first one is when the letter is fading each one of its sides, until it came to the second part, that is mainly composed by lots of vertical 'lights' with different widths and colors that emerge from the last side of the letter while it's also fading away. The third part is the camera movement applied while the lights are going away - but that is the easiest part.

The first part (fading away)

The fading effect has a clear similarity to a paintbrush "unpainting" the letter. In order to clone this effect, we must acknowledge that a paintbrush doesn't have an uniform tip, some brush tips are made of nylon and polyester.
To do this, we have to build an 'irregular' gradient effect. Using photoshop I've made this brush effect:

Later I've created each little piece of the gradient into HTML helpers elements, this pieces was named as a 'fur', each one being a single 'span' tag. And, as it can be seen in the image, each fur has a different gradient effect, that was also replicated in the CSS file.

With this irregular gradient created, I made they move using simple CSS key-frame animation, each helper having its own delay setting to start one after another.

The second part (colorful lights)

The idea behind the lights is similar to the paintbrush. But, instead of each little piece being a fur with a gradiente background, each light has a random solid color as background and a box shadow for the illumination effect.

In order to make the lights "avoid the camera" while its getting closer, it was created a random movement with key-frame animation that make them move sideways, opening an empty gap in the middle of the lights.

The third part (camera movement)

The camera movement was replicated also using key-frame animation, but this time the css property manipulated was the scale of the main HTML container, so it looks like the camera is zooming in the letter while all the other animations are playing at the same time.

Conclusion

The hardest part was to conciliate all animations to be played at exactly the time they should be, so 'animation-delay' plays a big role in these scenarios. The approach I toke in the animations was to make sure that the animation could be played with a different background color and even with a different letter color, just changing the SASS variable and all the animation would still work as it should.
The code can still be optimised in many ways, so feel free to play with it if you like.

Thats all guys. I hope this post can help someone in some way. =)