This document aims to alleviate the difficulties faced by domestic users learning Framer due to the lack of Korean resources. We've translated content from the official blog into Korean and added practical information. We hope this is helpful to Framer users.

Subscribe to our YouTube channel

Page Setup

First, prepare the page layout. In this tutorial, we use a basic page without special settings.

Start by placing a Frame to fit the full screen and set the Height to Viewport. (This ensures the Frame covers 100% of the browser screen).
Create another Frame inside it to serve as a container for the video grid.

• Set its size to 970 × 970 and align it to the center horizontally and vertically.

• Remove the Fill

• Rename it to container

This prepares a large box to hold the videos.

Adding Videos

Now, let's add videos.
Place the main important video at the center of the container and arrange the rest around it.
Note: Since the center video acts as a fixed reference point, it's good to pay attention to the placement order.

Adding Grid Animation

With the grid ready, let's apply a rotation.

1. Select the container that includes all the videos and add a Scroll Transform Effect.

2. Set it up so that during scrolling, it transforms as follows:
   Initial state: Opacity 1, Scale 1, Rotation 0
   On scroll: Opacity 1, Scale 1, Rotation 450

This creates an effect where the entire container rotates with scrolling.

Counter-Rotating Videos

When the container rotates, the videos inside will rotate too. However, we want the videos to appear fixed in place.

1. Select all the videos inside the container.

2. Apply the same Scroll Transform Effect, but reverse the rotation.

   Initial state: Opacity 1, Scale 1, Rotation 0

   On scroll: Opacity 1, Scale 1, Rotation -450

This way, the container rotates clockwise, but the videos rotate counterclockwise, creating the illusion that they are fixed on the screen.

Final Touches

The effects applied earlier work well, but can be refined for more natural transitions.

• Set a Scroll Limit to prevent the container from rotating excessively.

• Add Easing for smooth transition effects.

• Include a Remix Button so others can easily open and explore the project.

Conclusion

Creating a rotating video grid in Framer is simpler than it seems. By rotating the container and applying counter-rotation to the videos inside, you can implement captivating interaction with just these two settings.
Framer allows you to create such effects without code, making it accessible for anyone to try.

See effect and remix the project→

This article is a translated and adapted version of Framer’s official blog content on ‘Create a rotating video grid in Framer’.