This document aims to help Korean users learning Framer who struggle with a lack of Korean resources by translating content from the official blog into Korean and adding practical information. We hope it serves you well in your use of Framer.

Effects and Remixing Projects→

In remixing this project, you can learn how to set up animation segment controls, how to integrate with other components using events, and how to create an auto-playing gallery.

Through examples, you will learn to create animation segment controls, connect with other components using events, and implement a gallery that plays automatically. The best part is you can remix this project and customize it to suit your needs.

Control Components

First, let's take a closer look at the Control component. This component consists of two stacks. The upper stack contains clickable items, each item switches to a different Variant and triggers events simultaneously. These events are crucial as they are used later to switch the Gallery component to the correct Variant.

The lower stack controls where the button should be positioned. By animating the active state, the button moves to different positions in each Variant, and Framer takes care of the rest. This makes it easy to create a clean and polished segment control.

Auto-Playing Gallery

Next, let's look at the Photo component. This component has a simple structure of overlapping several photos. In each Variant, the opacity changes, determining which photo is visible. By setting it up so it transitions to the next photo after a certain time, you can easily create an auto-playing gallery.

Gallery Components

Now let's combine the Control and Photos components to create the Gallery component. Here, you'll create three Variants and configure each component to match the correct Variant. By leveraging the events set up in the Control component, the Gallery component switches to the respective Variant when the events occur.

Customizing the Gallery Component

In the final step, add simple interactions to the Variant. This will allow it to switch automatically to the next Variant after a certain period.

Additionally, variables from the Control and Photos components are exposed through the Gallery component. This makes it easy to reuse and connect to a CMS.

Conclusion

This project offers a great opportunity to learn how to create a reusable and responsive gallery component without writing a single line of code. Moreover, you can remix it to customize it as you wish.

So don't hesitate to open the project and get started.

Try following the Effects Project→

This content is a translation and adaptation of the Framer official blog post ‘Creating an auto-playing gallery — learn with a free Framer project’.