This document was created to help Korean users of Framer overcome the difficulties due to the lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope this will be of some help to those of you using Framer.

Shimmer is a visual tool often used in loading states or to highlight certain elements. Because it gives the impression of a “dynamic interface” with a thin beam sliding smoothly across the screen, it can leave a strong impression on the user. In this tutorial, we'll show you how to create a Shimmer effect on your website using Framer.

Subscribe to the YouTube channel

Creating Shimmer Effects with Framer

Step 1: Project Setup

First, create a new layer in Framer.
(Example size for the YouTube tutorial: 100px × 1px)

Step 2: Add Gradient Fill

Apply a linear gradient to the layer to create a beam of light that fades away on one side.

• Left: White (60% transparency)

• Right: White (0% transparency)

Step 3: Set Layer Position

Place the layer in the top-left corner of the screen.
Note: It's best to set the position property to Absolute.

Step 4: Add Animation Effects to the Layer

Select the layer and click the Add Effect button in the right panel to add a Loop effect.

Step 5: Configure the Effects

• Delay: 3 seconds

• Duration: 1.5 seconds

• Scale: 1

• Rotation: 0

• X value: Move to the right

• Opacity: 0 (natural fade-out effect)

• Transition: Ease Out (slows down towards the end)

This creates the subtle shimmer effect that smoothly disappears to the right.

Step 6: Duplicate Layer and Repeat Steps 4 & 5

Duplicate the same layer and place it on the right side of the Framer window this time. Repeat steps 4 and 5, but adjust the delay to 2 seconds and change the Y value to move the layer down.
By doing so, it moves in a crisscross manner with the first layer, creating a richer Shimmer effect.

• Delay: 2 seconds

• Y value: Move down

Preview

Now, publish the project and open it in your browser. You can see the two layers intersecting to create shimmer effects.

Conclusion

Applying shimmering effects to your website can add visual interest to your page in a fun and easy way. With Framer, you can easily create this effect without writing code. Follow the steps in this tutorial to add shimmering effects to your website and capture attention.

View Effects and Remix Project →

This post translates and adapts content from the Framer official blog, ‘Advanced animation techniques: strategic shimmer effects for professional UX’.