Posted on

Expanding Rounded Menu Animation

Menu animations are something that can elevate a design to another level. There are endless possibilities and they provide an opportunity to do something unique. Sometimes it’s also interesting to pair them with other animations. Already a while back I saw this really nice menu animation by Ruslan Siiz called “365 Magazine”:

It’s a really beautiful design and animation so I tried replicating it but with more of a dark theme. That dark theme is inspired by another design which I can’t recall (it’s probably from a year ago or so), especially the big letters.

This is the initial page:

When clicking on one of the links in the top menu, two things happen. First, we have a background cover animation which works with an “unreveal” effect. In this tutorial you can learn how this effect works and how to code it up. Second, we have the expanding menu animation in the foreground. This is the how the menu looks like when it’s expanded:

The whole animation looks as follows:

The rounded appearance of the menu is preserved by placing the submenu in a way that it overlaps the top menu. Using an element that wraps the submenu with the background color and border radius, and that has the overflow set to “hidden”, allows us to hide the inner menu element by setting its Y transform to -100%.

I really hope you enjoy this demo and find it inspiring! Let me know what you think via @codrops or @crnacura!

The post Expanding Rounded Menu Animation appeared first on Codrops.

Posted on

Kinetic Typography Page Transition

The other day I was drooling over HOLOGRAPHIK’s amazing kinetic typography animations. Especially this one caught my eye. There’s a very interesting (very short) part where some words are being rotated and zoomed in, and I couldn’t help but think of a page transitions that somehow incorporates that idea.

So I went ahead and tried it on a simple layout to see how it could work. Turns out it’s a lot of fun and there’s so many possibilities for making this look and feel right for a specific design.

The initial screen has some items:

Once we click on an item, the typography page transition happens. The faded background letters starts to rotate and become more visible and finally, they move out, revealing the next screen:

Here’s the whole animation (the color is actually a bit off in the video):

I really hope you enjoy this one and find it inspirational! Let me know what you think on Twitter @codrops or @crnacura! Thank you for checking by!

The post Kinetic Typography Page Transition appeared first on Codrops.

Posted on

Preview to Full Content Page Transition

Today I’d like to share a small transition effect with you. It’s an animation for a preview item that becomes the full page with an article. This kind of animation concept is really interesting for blog/magazine layouts. It’s a bit tricky because of the page being scrollable, but managing it with some overflow properties makes it work.

The preview item consists of an image and a special rounded button that has a magnetic hover effect that makes the text transition.

Once clicked, the content appears and the circle moves up, where the main title animates in.

And this is how it all comes together:

I really hope you enjoy this and find it useful!

Thank you for checking by!

The post Preview to Full Content Page Transition appeared first on Codrops.

Posted on

Building a Svelte Static Website with Smooth Page Transitions

Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!

In this live stream of ALL YOUR HTML, you’ll learn how image transitions with GLSL and Three.js work and how to build a static website with Svelte.js that will be using a third party API. Finally, we’ll code some smooth page transitions using GSAP and Three.js.

This coding session was streamed live on November 29, 2020.

Check out the live demo.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

The post Building a Svelte Static Website with Smooth Page Transitions appeared first on Codrops.

Posted on

Rapid Image Layers Animation

A while back, I came across this tweet by Twitter Marketing, which shows a video with a really nice intro animation. So I made a quick demo, trying to implement that effect. The idea is to animate some fullscreen images rapidly, like a sequence of covering layers. It’s a nice idea for an intro splash or even a page transition.

The way this can be achieved is by using the reveal trick described in the tutorial How to Create and Animate Rotated Overlays.

Basically, we have a parent wrap that is set to overflow hidden that we translate up (or down), while we translate its child in the opposite direction. It looks the same as if animating a clip-path that cuts off the image. (We could also do that, but clip-path is not a very performant thing to animate like transforms.)

When doing that animation on a set of layers, we get that really nice effect seen in the video.

For this demo, I created an initial (dummy) menu layout where you can click on the middle item to trigger the animation.

By setting a fitting animation duration and delay (I’m using GSAP here), the effect can be adjusted to look as smooth or as fast as needed. Have a look at the result:

The custom cursor animation can be found here: Animated Custom Cursor Effects

I really hope you find this little demo useful!

Credits

Rapid Image Layers Animation was written by Mary Lou and published on Codrops.

Posted on

Morphing Page Transition

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.

MorphingPageTransition_Featured

This demo is kindly sponsored by PageCloud, the website builder you’ll love to use.
If you would like to become a demo sponsor, you can find out more here.

Attention: For the demos use some modern properties like CSS Flexbox and CSS variables without a fallback, so please view them in a up-to-date browser.

The structure that allows us to move the shape along with the intro content, looks as follows:

<div class="content content--intro">
	<div class="content__inner">
		<!-- ... -->
	</div>
	<div class="shape-wrap">
		<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
			<path 
				d="M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z" 
				pathdata:id="M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z">
			</path>
		</svg>
	</div>
</div><!-- /content--intro -->

<div class="content content--fixed">
	<div class="content__inner">
		<!-- ... -->
	</div>
</div><!-- /content--fixed -->

The fixed content lies beneath the intro content, and once we move the intro content up, it gets revealed. At the same time we morph the SVG path into the one defined in the pathdata:id. When creating the two paths, one needs to make sure that they both have the same amount of points so that the morphing happens smoothly.

MorphingPageTransition_01

MorphingPageTransition_02

We hope you enjoy this little effect and find it useful!

References and Credits

Morphing Page Transition was written by Mary Lou and published on Codrops.