Grid Flow Animation
A loading and navigation animation where thumbnails "flow" into a grid.
On-Scroll Pixelated Image Loading Effect
A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram's website.
Repetitive Typography Animation
After using a typography animation as page transition, my next endeavour incorporating kinetic typography ideas into a web design, is based on this fantastic animation by Domagoj Štrok for HOLOGRAPHIK®:
This is actually a really interesting challenge: take a fun typography animation like this and try making it part of a web design! Challenge accepted 
The aim was to duplicate the words just like in the video and then, at a specific point, use the result as part of the design.
So, here is the whole flow of the animation:
Okay, this was just for fun really, so don’t take this concept too seriously! It’s not really usable but I hope it serves as an inspiration for what can be done. Keep in mind that this is only a mockup (not scrollable, not responsive) that serves as a proof-of-concept.
I hope you enjoy it and let me know what you think via Twitter @crnacura or @codrops.
The post Repetitive Typography Animation appeared first on Codrops.
Rotating Loading Animation of 3D Shapes with Three.js
All things we see around are 3D shapes. Some of them are nice looking, some of them you’d like to touch and squeeze. But because it’s still quarantine time, and I don’t have many things around, I decided to create some virtual things to twist around. 
Here’s what I ended up with:
How to do that?
To render everything I used Three.js, just like Mario Carillo in his amazing demo, go check it out! Three.js is the best and most popular library to do things with WebGL at the moment. And if you are just starting your 3D path, it is definitely the easiest way to get something working.
If you just rotate the shape, its nothing special, its just rotating.
Interesting things start to happen when you rotate different parts of the shape with different speeds. Let’s say I want the bottom part of the object to rotate first, and than the rest, let’s see whats going to happen.
To do something like that, you would need to use a Vertex shader. I used a little bit of math and rotated parts of the object depending on the Y or Z coordinate. The simplified code looks like this:
vec3 newposition = rotate(oldPosition, angle*Y_COORDINATE);
So with a coordinate change, the rotation would change as well. The rotate function itself includes a lot of Sine-Cosine’s and matrices. All the math you need to rotate a point around some axis. To give it a more natural feel, I also change the easing function, so it looks like elastic rubber.
Visuals, MatCap
To create a nice look for objects, we could have used lights and shadows and complicated materials. But because there’s not so much in the scene, we got away with the most simple kind of material: MatCaps. So instead of making complicated calculations, you just use a simple image to reference the lighting and color. Here is how it looks like:
And here is how the torus shape looks like with this texture applied to it:
Amazing, isn’t it? And so simple.
So combining Matcaps and a rotation method, we can create a lot of cool shape animations that look great, and have this rubber feeling.
Go and create your shape with this technique and make sure to share it with us! Hope this simple technique will inspire you to create your own animation! Have a good day!
The post Rotating Loading Animation of 3D Shapes with Three.js appeared first on Codrops.