This document is intended to assist local users learning Framer, who face challenges due to a lack of Korean resources. We've translated content from the official blog and added practical information. We hope that it provides some assistance to those using Framer.

If you love animations, you'll be excited to hear about the new Loop feature recently updated in Framer. This feature allows you to create infinitely repeating animations, and it’s very simple to use. In this article, we’ll show you how to create a simple animated icon using the new loop feature.

What You Need

To make an animated icon, you’ll need to have Framer installed on your computer. It can be downloaded from the official website, and with a basic understanding of Framer’s design/animation tools, you can easily follow along.

Getting Started

1. Open Framer and start a new project.

2. Create a new frame to contain the icon, and place three shapes inside it (we'll use a square, triangle, and circle here).

Creating the Animation

1. Select the first shape and go to the right effects panel.

2. Add a new animation and specify the desired attributes (by choosing size (scale = 0.7), we’ve created a bouncing effect).

Enabling the Loop in the animation options means this animation will repeat endlessly. (Here, we used the Mirror effect to give a back-and-forth motion.)

Adding Interaction

Now, you can apply the animation to the remaining shapes in the same way. While animations alone are fun, adding additional interactions makes the icon more attractive.

Select a shape and choose the desired action behavior from the right effects panel. (For example, we set it so that the square changes color on Hover).

Wrapping Up

Now, you can easily create an icon where the circle, square, and triangle each have repeating animations and interactions. Thanks to Framer's new Loop feature, you can create attractive animated icons without complex settings. Use this guide to craft your unique Loop animated icon.

This article is a translated and adapted version of the Framer official blog post ‘Creating animated icons with Framer’s loop functionality’.