Getting Started

The first step to creating a wave effect in Framer is drawing a frame. Press the F key to open the frame tool and position the frame in your desired size. In this effect, the frame size isn’t that crucial.

Next, set the frame to have a linear fill. Select the frame, then choose Linear under Fill in the Properties panel and assign the colors #09F and #0DF. This applies a refreshing gradient.

Finally, make the corners of the frame rounded. Set the radius to 40% to create a 'squircle' form, which serves as a base shape suitable for wave animations.

Creating Layers

The wave effect consists of a total of three layers. First, change the position of the frame to Absolute. You can do this by selecting Absolute under Position in the Properties panel. Then increase the width and height of the layer to 4000 pixels to prominently display the wave effect.

Next, duplicate this layer twice so that you have a total of three layers ready. (Use the shortcut Command + D) You should now see three layers lined up in the Layers panel.

Lastly, apply the Multiply blending mode to mix the three layers naturally. By selecting Multiply in the Style panel, the overlapping layers reveal an effect resembling waves.

Adding Animation

Let's add movement to the layers now. Select all three layers and apply a Loop animation from the Effects in the Properties panel. By default, the layers rotate 360 degrees, and when set to a Linear curve, the speed remains consistent, giving a smooth flowing wave impression. Another important setting is Pinning. Deselect the left, right, and bottom pins for all three layers to keep the waves in position even when the page size changes.

Adding Appear Effect

Adding an appear animation here can create a more dynamic scene. Select the wave container and apply the Appear effect. Set Opacity to 1 and Y value to -400 to make the waves appear to descend from the top of the screen. Set the transition to Ease Out and the duration to 5 seconds to achieve the effect of the waves appearing smoothly as they begin.

Experimenting with Various Styles

The biggest advantage of the wave animation is its vast potential for modification. For instance, changing or flipping the colors of the layers can create entirely different wave moods. Additionally, positioning the waves at the bottom instead of the top can be used as a footer background for the page. In other words, the wave effect is a powerful expression tool that designers can freely adapt to match the brand tone.

Try the effect now→

This post is a translated and adapted version of Framer's official blog content, ‘Create a stunning wave animation in Framer with just three layers and zero code’.