Now it's time to focus on the animation part. 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.
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 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.įirst 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.
