This document is designed to help local users learning Framer, who face difficulties due to a lack of Korean resources. We've translated content from the official blog into Korean and added practical information valuable for real-world application. We hope this will be of some assistance to those using Framer.

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

Through the examples, you'll learn to create animation segment controls, link them with other components using events, and implement an auto-playing gallery. The best part is, you can remix this project and customize it to suit your needs.

Control Components

Let's first take a closer look at the Control component. This component consists of two stacks. The upper stack contains clickable items, each transitioning to a different Variant and triggering events. These events are crucial as they are used later to switch the Gallery component to the correct Variant.

The lower stack controls where the buttons should be positioned. When you animate the active state, the button moves to different positions in each Variant, with the rest managed by Framer. This allows for the easy creation of a neat, high-quality segment control.

Auto-Playing Gallery

Next, let’s look into the Photo component. This component has a simple structure with several overlapping photos. In each Variant, the opacity changes, determining which photo is visible. By setting it to automatically transition to the next photo after a certain period, you can easily create an auto-playing gallery.

Gallery Component

Now, combine the Control and Photos components to create the Gallery component. Here, you'll create three Variants and configure both components to the appropriate Variant. Utilizing the events set up in the Control component, you can connect them so that the Gallery component switches to the corresponding Variant when an event occurs.

Customizing the Gallery Component

In the final stage, add simple interactions to the Variant. This allows it to automatically transition to the next Variant after a set period.

Additionally, we've exposed the variables of the Control and Photos components through the Gallery component. This makes it not only easy to reuse but also simple to connect with a CMS.

Conclusion

Overall, this project is a great opportunity to learn how to create a reusable, responsive gallery component without writing any code. Additionally, you can remix and customize it as you desire.

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

Check out the project for great results→

This article is a translated and adapted version of Framer's official blog post ‘Creating an auto-playing gallery — learn with a free Framer project’.