rotation | The Blog Pros

February 3, 2021

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.

April 18, 2019

How to Create and Animate Rotated Overlays

Today we’d like to explore a specific reveal effect with you. If you saw the Crossroads Slideshow a while back, you might have noticed the page transition when the content is shown after an image gets clicked. We call this type of transitions a “reveal” animation because some content is already there while an overlay element animates out, revealing what’s underneath.

To make such an effect is pretty straightforward: simply place an overlay with the same or different color of the page background and animate it out of the viewport; whatever is under it will show. But there are two challenges here: one is if you’d like the overlay itself to have some content which you want to conceal, i.e. which you want to get cut off while hiding it and not simply move along with the parent when animating it out. The other challenge is to add a rotation and guarantee that the overlay covers the whole screen so that no gaps are shown when you move it out. When combining these two effects, things get really interesting.

So let’s tackle these two challenges in this little tip today and show some of the many possibilities for how to use these techniques in a page design.

The demos are kindly sponsored by Northwestern: Earn your MS degree entirely online. If you would like to sponsor one of our demos, find out more here.

Attention: Highly experimental prototyping, please view in a capable browser.

The reveal effect

The beauty of the reveal effect is that the technique is very simple, yet the result is so interesting: take any element that has its overflow set to “hidden” and animate it in some direction, while animating its child in the opposite direction. This creates a “cut off” look, the content appears to be steady in one place, as if we’re animating some kind of clipping mask. Yet we are only translating elements.

Under the hood, you can see what’s happening here:

We simply move a container up. Now, let’s keep the content in place by reversing that movement and translating it in the opposite direction:

One last step is to add overflow: hidden to the parent:

And that’s it! Now, if you want to spice things up a bit, you can add a different duration or easing to the reverse element or other animations to the inner elements.

Adding a rotation

The effect becomes a little bit more complicated when we want to add a rotation. When we rotate an element it will create gaps and not cover the background entirely anymore. So we need to make sure that it’s width and height is set in such a way that when rotated, there are no gaps.

Technically, we’re want the (minimum) bounding box of a rotated rectangle.

The following Stackoverflow thread gave us the right formula for our case: How to scale a rotated rectangle to always fit another rectangle

We only need to find the correct width and height, so the following bit is interesting to us:

(The notation |x| denotes an absolute value.)”

Additionally, we have to make sure that we keep the previous structure in place and that we show the content straight. So we need to rotate the content back. To ease our animation and not tinker with calculations we avoid moving the rotated content, but instead we’ll use the resized container for the motion.

In total we will use three containers to achieve all that:

<div class="content content--first"><!-- only rotated -->	
	<div class="content__move"><!-- resized and moved -->
		<div class="content__reverse"><!-- reverse rotation -->
			<!-- ... -->
		</div>
	</div>
</div>

If you look at the x-ray view of one of the demos, you can see the rotation and calculation of the new width and height:

Given this structure, there are really endless possibilities for rotated reveal and overlay animations.

Think of multiple overlays. Think of matching animations of the elements that are being revealed or the ones that get hidden.

There’s so much to explore!

Have a look at our little compilation, we hope you enjoy it!

How to Create and Animate Rotated Overlays was written by Mary Lou and published on Codrops.

April 3, 2019

Crossroads Slideshow

Today we’d like to share an experimental slideshow with you. The main idea is to show three slides of a slideshow that is slightly rotated. The titles of each slide, which serve as a decorative element, overlay the images and are rotated in an opposing angle. This creates an interesting look, especially when animated. When clicking on one of the lateral slides, the whole thing moves, and when we click on the middle slide, we move everything up and reveal a content area.

The animations are powered by TweenMax.

Attention: Note that the demo is experimental and that we use modern CSS properties that might not be supported in older browsers. Edge has a problem with SVG data-uri cursors, so you won’t see the custom cursors in the demo there.

The initial view of the slideshow looks as follows: