DEV Community

loading...
Cover image for Netflix intro animation - Pure CSS

Netflix intro animation - Pure CSS

claudiobonfati profile image Claudio Bonfati ・3 min read

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.

Netflix logo

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.

Separated letters from Netflix's logo

The Animation

Netflix intro

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)

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:

Paintbrush gradient 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)

Colorful lights from Netflix animation

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)

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. =)

Discussion

pic
Editor guide
Collapse
ben profile image
Collapse
juanpumpkinpie profile image
juanpumpkinpie

such a heavy work!

Collapse
cayde profile image
CAYDE

🤩🤩🤩

Collapse
vivirenremoto profile image
Miquel Camps

This is Awesome! Good job 👏

Collapse
tomeraitz profile image
Tomer Raitz

It's amazing! can I ask how long it took you to complete it all?

Collapse
claudiobonfati profile image
Claudio Bonfati Author

Hey, glad you liked it.
It took me about 7 hours of work, one hour a day, one week in total.

Collapse
tomeraitz profile image
Tomer Raitz

cool, it's pretty fast to something that complex. nice job

Collapse
warengonzaga profile image
Waren Gonzaga

Bruh, this is so sick! I know how hard it is... you nailed it.

Collapse
victoor profile image
Víctor Falcón

Good job! Don't know that it's even possible.

Collapse
olegzhermal profile image
Collapse
kasimsn profile image
Kasim ŞEN

This is amazing dude. Good job 👍

Collapse
ikurosaki profile image
ikurosaki

Que buen trabajo.

Collapse
nikhilmwarrier profile image
Nikhil M Warrier

This a whole another level of awesomeness!!!
Mindblown!!!

Collapse
cdthomp1 profile image
Cameron Thompson

This is amazing!

Collapse
thomasbnt profile image
Thomas Bnt

Soooo magic ! 🤯

Collapse
bbavouzet profile image
Collapse
shadowtime2000 profile image
Collapse
akshajsaini profile image
AkshajSaini

Love it bro

Collapse
emanoellopes profile image
Emanoel Lopes

Awesome bro!

Collapse
point_android profile image
Collapse
prabhuignoto profile image
Prabhu Murthy

wonderful job

Collapse
afonso profile image
afonso

wow! great job!

Collapse
stackfindover profile image
Stackfindover

Really nice, I appreciate your work :)
Netflix logo animation CSS