This document is intended to help domestic users learn Framer by addressing difficulties due to the lack of Korean resources. We've translated official blog content into Korean and added practical information. We hope it provides some assistance to Framer users.

Subscribe to the YouTube channel

Have you ever visited a website and been impressed by its interactive and dynamic appearance? One of the latest popular interactions is the framework canvas effect. This approach makes it possible to drag the screen and move elements, just like a real canvas. Sketch and Jitter have already adopted this effect on their websites. This tutorial provides a step-by-step guide on creating this effect in Framer.

Creating a Canvas Effect

1. Page Setup

Press the F key to create a new frame. Make sure it covers the entire page. Pin it to the top left and right corners, setting its height to the viewport. Remove Fill and name the frame 'Frame Canvas'. Create one more frame in the center, set its size to 2500 × 2500, and fill it with white. Name this layer 'draggable'. Add the objects to apply effects here.

2. Add Drag Effect

Select the ‘draggable’ layer and add Drag from the Effects panel on the right. Keep it as freeform and disable Snapback and Momentum. Preview to ensure dragging works.

3. Set Constraints

Select the 'Frame Canvas' layer and specify a section name in the Scroll section of the properties panel. Then return to the draggable layer's drag effect and change Freeform to No, choosing the section you just made. Preview to ensure the draggable layer only moves within the 'Frame Canvas'.

4. Add Elements

Add objects you wish to manipulate to the ‘draggable’ layer. Set Overflow for the page and 'Frame Canvas' layer to Visible to view the entire ‘draggable’ layer.

5. Hover State and Rotation

Add hover state and rotation when starting to drag objects. Implement this by using onDragStart to change the object's opacity and slightly rotate it during dragging.

Add Interaction to Websites

We've now completed a framework canvas effect in Framer that allows free manipulation of components, much like a real canvas. This effect makes a website feel more interactive and dynamic, easily achieved using Framer's drag effect.

See the effect and remix project→

This article adapts and translates content from Framer's official blog ‘Create a canvas effect in Framer with draggable elements’.