This document is intended to help Korean users learning Framer by addressing the lack of Korean resources, translating official blog content into Korean, and adding practical information. We hope it will be of some assistance to those using Framer.

Subscribe to our YouTube channel

Getting Started

The first step to creating a wave effect in Framer is to draw a frame. Press the F key to open the frame tool, and you can place the frame at your desired size. The frame size isn't critically important for this effect.

Next, set a Linear fill on the frame. Select the frame and choose Linear from Fill in the Properties panel, then set the colors to #09F and #0DF. This will give it a refreshing gradient effect.

Finally, you need to round the corners of the frame. Set the Radius to 40% to achieve a shape close to a 'Squircle', which serves as a suitable base shape for the wave animation.

Creating Layers

The wave effect is composed of three layers in total. First, change the position of the frame to Absolute. Select Absolute from Position in the Properties panel. Then, enlarge the width and height of the layer to 4000 pixels to prominently display the wave effect.

Next, duplicate this layer twice to prepare a total of three layers. (Use the Command + D shortcut) Now, you can see the three layers lined up in the Layers panel.

Finally, apply the Multiply blending mode so that these three layers naturally mix together. By selecting Multiply in the Style panel, the layers overlap and reveal a wave-like overlapping effect.

Adding Animation

Now let's add movement to the layers. Select all three layers and apply a Loop animation from Effects in the Properties panel. By default, the layers rotate 360 degrees; setting this with a Linear curve keeps the speed constant, allowing the wave to flow smoothly without breaking. Another important setting is Pinning. After selecting all three layers, release the left, right, and bottom pins to ensure the wave stays in place even when the page size changes.

Adding Appear Effect

Adding a reveal animation here can create a more dynamic scene. After selecting the wave container, apply the Appear effect. Setting Opacity to 1 and Y to -400 will make it seem as if the wave descends from the top of the screen. Setting the transition to Ease Out and the time to 5 seconds gives a smooth effect as the wave appears and starts.

Experimenting with Different Styles

The biggest advantage of wave animation is its limitless transformations. For instance, by changing or flipping the layers' colors, you can create a wave with a completely different vibe. Additionally, placing the wave at the bottom instead of the top can let you use it as a footer background for the page. In short, the wave effect is not just a simple decoration but a powerful expressive tool that designers can freely transform to match the brand's tone.

See the effect and try it yourself→

This article is an adapted translation of the Framer official blog's ‘Create a stunning wave animation in Framer with just three layers and zero code’.