How is it made?
Can someone explain how the opening grid animation is made? i want to learn but even looking at dev tools its just so hard to interpret, i have no idea where to begin or where to look.
https://imjulien.dev/
ImJulien.dev - Web Développeur
Développeur web freelance spécialisé dans la création de boutiques E-Commerce Prestashop
3 Replies
There’s a whole pile of span tags that make up all the lines. You can see them if you open the dev tools and use the element selector. He’s using a couple key frame animations on them to animate their width and height. The container that holds the lines is also running an animation that does a 3D rotation on the whole thing.
huh... never seen dev tools refuse to show all nodes before. Understandable in this case since they are all empty divs:
Probably best if you want to do something like this to look into
canvas. this page uses 75% of my GPU on load, that's way too much.