Creating a canvas-like website in Framer with interactive draggable elements

[@fathimamula3169]

The sound effects at 5:59 caught me off guard but in the best way

[@stevenwalker3721]

Very nice! I'm new to Framer, and this is really incredible! I will definitely enjoy learning more about the capabilities of Framer. Keep up the great tutorials.

[@FilipeSantos-jw6og]

6:00 Could you people pls create a feature that detects when we're just dragging this into position and add this sound effect????

[@cedricvanravesteijn3244]

Another fantastic tutorial! Excited for future videos 😁

[@Framer]

More to come!

[@withrina]

Awesome 🎉❤ definitely using this on my portfolio ~

[@grayfox86]

0.2 speed tupi tupi like pokemon lavandonia ost LOL, thanks for tutorial i try framer :)

[@marlonux]

Amazing addition, thank you so much!

[@Framer]

Glad you like it!

[@georgekrax]

Would love it if we could integrate Framer with Supabase 🤩

[@ryanottoisaac]

Awesome video! Thank you.

[@grafikaya]

Hey thanks for the tip. is there any possibilities to snapping object while dragging. İam trying to create hero title smth like one of the word out of form and users will drag one word to snap baseline with other words.

[@orelhassid]

Really nice You can add Code Overide to add z-index to the cards you are dragging: ``` import type { ComponentType } from "react" export function dragCard(Component): ComponentType { return (props) => { return } } ``` Would be cool to add additional code that make sure always the dragged card will be on top of everyone

[@Kawalants]

hey, did the override work for you? I'm looking for exactly the same effect you describe, but somehow I can't seem to get it working

[@jamesxxxxxx]

Is it possible to modify the z-index when dragging items?

[@kanasorta]

how do I drag a link without it clicking the link on mouse release?

[@mehmeterdem742]

I need this too!

[@stevenus]

Really cool, thanks for sharing: loving what Framer is releasing!

[@Framer]

Glad you enjoy it!

[@deepanshkulshreshtha]

is there a possibility of adding a zoom-in and out functionality to the canvas? If yes then can someone please explain to me how can I achieve that?

[@ivanaperica]

This is exactly how I wanted to showcase my case studies. Is it also possible to add a zoom-in and out function to the canvas? I tested it with some people and not everybody is getting the dragging and it also depends on the used device (mouse or touchpad). Btw: Thank you guys for this great tool. This is now my third try with website builders and Framer is just awesome!

[@thompson.studio]

Is it possible to connect this kind of layout to a CMS for a portfolio "grid"?

[@gabrielegelfofx]

is it possible to add 3d objects and/or rendered png sequences with alpha? I’d like to design scroll effects like the ones visible in the Apple web site. Dora has these features.

[@Djallski]

So nice!! Quick question: I've added this canvas-like section on my portfolio website right underneath my nav bar (which is a standard component). Now when I try to add sections underneath this one, they appear on top at first and then when I switch the section from relative to absolute, it messes up the whole order of my page and I can't seem to get it fixed. When I add a footer (standard component) and set it to relative, it doesn't mess up the order. Any1 else run into this problem and knows how to solve it?

[@iandalley]

You ever figure this question out? running into the same problemo.

[@jelinasantos4284]

this is cool!

[@sixfiguredesigner]

Really cool! Does the draggable areas on mobile work with gestures?

[@Framer]

Yes!

[@imbasit995]

Is it possible to also have gifs as draggable elements in the canvas?

[@Framer]

Definitely!

[@Design.Mania_]

Framer Is about to kill webflow !

[@mt000mp]

nice

[@Framer]

Thanks

[@abhijitroutdev]

Pupi Dupi Pupi Doo Pupi

[@littlechange]

Lol that fast forward sound. 😅

[@jeandorbensaustin9896]

Goodbye webflow