Website
Draggable Freeform Canvas Website in Framer
This is a freeform canvas website in Framer that you can navigate by dragging the canvas itself and other elements around. This style of website can be created in Framer without writing any code, thanks to the amazing drag effect. Feel free to remix the project to see how it's built!
Created by
About the resource
To create a freeform canvas website in Framer, first we have to create a container, which fills up the width of the website and has 100vh, which means that it always takes up 100% of the given viewport height.
Then, within this container, we have to place another frame which we'll call Drag Canvas, since this will be the main surface of the canvas we'll be dragging around. This is a huge frame (3000x3000) and all other elements visible on the canvas will be placed within this Drag Canvas frame.
You can see the structure of these mentioned frames below.
About the resource
To create a freeform canvas website in Framer, first we have to create a container, which fills up the width of the website and has 100vh, which means that it always takes up 100% of the given viewport height.
Then, within this container, we have to place another frame which we'll call Drag Canvas, since this will be the main surface of the canvas we'll be dragging around. This is a huge frame (3000x3000) and all other elements visible on the canvas will be placed within this Drag Canvas frame.
You can see the structure of these mentioned frames below.
About the resource
To create a freeform canvas website in Framer, first we have to create a container, which fills up the width of the website and has 100vh, which means that it always takes up 100% of the given viewport height.
Then, within this container, we have to place another frame which we'll call Drag Canvas, since this will be the main surface of the canvas we'll be dragging around. This is a huge frame (3000x3000) and all other elements visible on the canvas will be placed within this Drag Canvas frame.
You can see the structure of these mentioned frames below.
Structure of the frames seen on the layer panel.
Structure of the frames seen on the layer panel.
Structure of the frames seen on the layer panel.
Now all we have to do is make sure that the elements on the canvas, and the canvas itself, are draggable. Fortunately, it's the easiest thing to add these quick effects in Framer by selecting layers, going to the right panel, clicking the plus button next to "Effects" and selecting "Drag."
Yep, basically that's all we need to do to make something draggable in Framer.
Now all we have to do is make sure that the elements on the canvas, and the canvas itself, are draggable. Fortunately, it's the easiest thing to add these quick effects in Framer by selecting layers, going to the right panel, clicking the plus button next to "Effects" and selecting "Drag."
Yep, basically that's all we need to do to make something draggable in Framer.
Now all we have to do is make sure that the elements on the canvas, and the canvas itself, are draggable. Fortunately, it's the easiest thing to add these quick effects in Framer by selecting layers, going to the right panel, clicking the plus button next to "Effects" and selecting "Drag."
Yep, basically that's all we need to do to make something draggable in Framer.
The drag effect in Framer.
The drag effect in Framer.
The drag effect in Framer.
What you might notice in the image above is that a section is set on the drag effect. I added this to the Drag Canvas's drag effect to make sure it has a drag limit and we can't drag it off the website. The #container you see there is a scroll section added to the container that wraps the Drag Canvas.
If you want to see a full step-by-step tutorial on how I created this, make sure to watch this video.
What you might notice in the image above is that a section is set on the drag effect. I added this to the Drag Canvas's drag effect to make sure it has a drag limit and we can't drag it off the website. The #container you see there is a scroll section added to the container that wraps the Drag Canvas.
If you want to see a full step-by-step tutorial on how I created this, make sure to watch this video.
What you might notice in the image above is that a section is set on the drag effect. I added this to the Drag Canvas's drag effect to make sure it has a drag limit and we can't drag it off the website. The #container you see there is a scroll section added to the container that wraps the Drag Canvas.
If you want to see a full step-by-step tutorial on how I created this, make sure to watch this video.
