This document addresses the challenges faced by Korean users learning Framer due to the lack of Korean resources. It translates content from the official blog into Korean and adds practical information. We hope this provides some help to everyone using Framer.

Shimmer is a visual element often used to indicate loading states or highlight effects. As a thin beam of light smoothly moves and sparkles across the screen, it can give users the impression of a “lively interface.” In this tutorial, we'll show you how to create a Shimmer effect for your website using Framer.

Subscribe to the Framer YouTube Channel

Creating Shimmer Effects in Framer

Step 1: Prepare the Base Layout

1. Add a Shimmer Layer to represent the effect.

   • Size: Height 1px, Width 100px

   • Position: Top-left corner of the app window

   • Fill: Linear Gradient (left → right, white 60% → white 0%)

Step 2: Apply Loop Effect to the Shimmer Layer

1. After selecting the Shimmer layer, add Effect → Loop.

2. Settings:

   • Delay: 3 seconds (wait 3 seconds after the animation ends)

   • Scale: 1

   • Rotation: 0

   • X Value: 800px (move to the right)

   • Opacity: 0 (fades away while moving)

   • Transition Type: Ease Out (starts fast then slows down)

   • Duration: 1.5 seconds

Now, the Shimmer layer will smoothly move to the right and disappear every 3 seconds.

Step 3: Add Right Shimmer

You can also add a Shimmer effect vertically, like on the Linear website.

1. Create a second Shimmer layer.

   • Size: Width 1px, Height 100px

   • Position: Top-right corner of the app window

   • Fill: Apply the same Linear Gradient

2. Add a Loop Effect in the same manner.

   • Delay: 2 seconds (set out of phase with the first Shimmer)

   • Y Value: about 670px (move down)

   • Opacity: 0

   • Transition Type: Ease Out

   • Duration: 1.5 seconds

Now, publish your project and open it in a browser. You’ll see the two layers crossing each other to create the Shimmer effect.

Conclusion

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

View Effects and Remix Project→

This article is a translation and adaptation of the content from Framer's official blog ‘Advanced animation techniques: strategic shimmer effects for professional UX’.