Видео

Studio Duo to the world!

I dont know why i cant create the component :( please help

Please, what can i do about my Framer problem?

Hello @studioduo, I am encountering an issue with Framer. Whenever I transfer my portfolio website to Framer and create designs for different devices like tablets and phones, I am unable to preview the desktop layout as it remains deactivated.

My Boss 🎉🎉

My Boss

Superb tutorial!!!

Awesome tutorial! Thanks for this gem

Please can you provide us with the resource file for this tutorial. Means the remix file. Thanks 🙏

Thank you! I was able to easily integrate Namecheap with Framer!

hi when i click on visible nothing happen why

Hello, is this responsive

Love this, thanks!

Thanks! Amazing vid

quick and useful

Appreciate you brother

Very useful video ! Thanks You

Upload a video about how to do perfect responsive website in framer

Thanks for the great tips 😊

This is how you make tutorials. No intro, straight to the point, pure value. Thank you.

bro you made this sooo easy thank you, much appreciated

So happy that I found your tutorial. It really helped me to set up DNS records.

Is there a way you can make it so the auto-cycle stops when you're hovering one of the cards? For example, if s2 is open and I'm hovering on s-4, the auto-cycle stops until my mouse leaves s-4.

more videos please

For those struggling with Z indexing and jumpy positioning when scrolling, this fixes all :) import type { ComponentType } from "react" import { useRef, useState, useEffect } from "react" import { motion, useSpring } from "framer-motion" function hasButtonOrAnchorAncestor(element: HTMLElement | null): boolean { if (!element) { return false } if (element.tagName === "BUTTON" || element.tagName === "A") { return true } return hasButtonOrAnchorAncestor(element.parentElement) } export function withCursorFollow(Component: ComponentType): ComponentType { return (props: any) => { if (typeof document === "undefined") { return null as any } // Add a style tag to the head of the document to hide the system cursor for all elements const style = document.createElement("style") style.appendChild( document.createTextNode("* { cursor: none !important; }") ) document.head.appendChild(style) const cursorRef = useRef(null) const [isHovering, setIsHovering] = useState(false) const spring = { type: "spring", stiffness: 1000, damping: 70, } const storedPosition = localStorage.getItem("cursorPosition") const initialCursorPosition = useRef( storedPosition ? JSON.parse(storedPosition) : { x: window.innerWidth / 2, y: window.innerHeight / 2 } ) const positionX = useSpring(initialCursorPosition.current.x, spring) const positionY = useSpring(initialCursorPosition.current.y, spring) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (!cursorRef.current) return // Check if the cursor is hovering a button or "A" tag element const isHovered = e.target instanceof HTMLElement && (e.target.tagName === "BUTTON" || e.target.tagName === "A" || hasButtonOrAnchorAncestor(e.target.parentElement)) setIsHovering(isHovered) // Update the position based on the cursor position positionX.set(e.clientX) positionY.set(e.clientY) localStorage.setItem( "cursorPosition", JSON.stringify({ x: e.clientX, y: e.clientY }) ) } // Store the initial cursor position when the component is first rendered initialCursorPosition.current.x = window.innerWidth / 2 initialCursorPosition.current.y = window.innerHeight / 2 window.addEventListener("mousemove", handleMouseMove) return () => { window.removeEventListener("mousemove", handleMouseMove) } }, []) return ( <motion.div ref={cursorRef} style={{ position: "fixed", left: positionX, top: positionY, pointerEvents: "none", zIndex: 9999, }} > <Component {...props} /> </motion.div> ) } }

This is amazing! Thank you so much, it was exactly what I needed 🥺

Hi how are you ! This version is responsive or not please ?

Thank you

good videos. thanks

Thanks buddy

Thank for this! It worked. My only problem is that the original cursor is still there. So I have both the original and custom cursor overlapping.

Hey how are you ? You are in the framer communauty ? What is your @ please in framer community. I have a problem and maybe you can help to fix that.

Amazing Video ! I would like to know when you use html to framer after that how buily correctly the structure of the webflow website in framer. Cause its not structed after the copy in framer. Can yiu share tips for that ?

Ridiculous

Please can you be less fast next time, you are speeding lol. Thanks for the tutorial boss.

Your framer link was showing not found.

Can you make more videos on this and show illumination effect behind the cursor? Also, can I make the cursor element on figma and export it to framer and then run the code for this?

When I scroll the position of the cursor jumps around and doesn't stay with the mouse position properly

Do you sell this template?

Good morning and thank you god all good works you’ve been doing. Please can you help with a video analyzing how to do the sign up and login page in framer and it will respond.

Is this animation work at mobile breakpoint?

Thank you, this really helped out. Much appreciate. Left a like and subscribe.

Hello, I have a question. I saw you add the CHAME record, and did you type anything there for the value? I I was a bit lost there, since you blur it and quicky move on the click.

why the customized cursor does not follow my mouse correctly, it persist always on top of my actual mouse cursor position?

*PromoSM*

hey , i just test with webflow website and its just INSANE. I UNDERstand the streght of this extension and why webflow website are really easy to duplicate. Because Webflow Website use perfectly HTML structure. When htlm is build clearly, it work very well. This extension is an webflow killer. Test on webflow landing pag.. i am choked.

Can I edit your video?

I love love love this!

I am new to Framer, I am learning and would like to understand more, I followed your tutorial and there is one point I just can't get past. The position types; fixed, relative, fill and fit content, min and max width and height. I still can't, even though I am training myself, understand the layer hierarchy (I come from the world of graphic design), and to understand and use these options quickly, I often find myself confused about them. Can I get some help with this? A more comprehensive focused explanation? i have also studied the official guides, but they were not enough for me to understand the real differences and the right use. thank you

Man, I was searching forever to figure this out. Really appreciate you making the tutorial!