- 29
- 47 187
Shams⚡️Nahid
เข้าร่วมเมื่อ 12 ต.ค. 2023
I'm here to push your limits with no-code platforms🔥 to help you deploy your products faster than traditional ways.
Scroll Mask-like Parallax Effect using Framer | Free Remix
In this breakdown, I explain how to create a Scroll Mask-like parallax effect in Framer using Scroll Speed and Scroll Transform. By adjusting these values, you can achieve a professional parallax effect while maintaining responsiveness across breakpoints. This effect works as a parallax and mask, incorporating micro-interactions for each element. Additionally, I cover how to implement a blur text animation on screen view to enhance the visual experience.
Join My Community of 600+ Unique Members in the Dev/Design Industry for Exclusive Support: www.linkedin.com/groups/14274313/
Remix File [Watch video first to understand, I am here to educate, not to giveaway]: Check my "x.com/shamsXdaily" Bio link to have the remix file.
Join My Community of 600+ Unique Members in the Dev/Design Industry for Exclusive Support: www.linkedin.com/groups/14274313/
Remix File [Watch video first to understand, I am here to educate, not to giveaway]: Check my "x.com/shamsXdaily" Bio link to have the remix file.
มุมมอง: 474
วีดีโอ
Free Personalized AI Chatbot Agent on your website | Framer | Webflow | Wordpress | Botpress
มุมมอง 50614 ชั่วโมงที่ผ่านมา
This video I will breakdown how you can add a free personalized AI chatbot Agent on your Framer or webflow or wordpress or any custom code website using botpress and how to implement that on framer website. Framer Code Component Link: Check my “x.com/shamsXdaily” Bio Link. Visit that website, click Framer remix button, select your desired option and submit, will automatically send to your given...
Framer Password Protection Page | Applicable in Free Plan
มุมมอง 34814 วันที่ผ่านมา
Learn how to enable password protection on your Framer projects even on the free plan! In this video, I’ll show you how to create a custom code component that adds password protection to your Framer pages, bypassing the need for the paid feature. Code Override Link: Check my “x.com/shamsXdaily” Bio. Join My Community of 600 Unique Members in the Dev/Design Industry for Exclusive Support: www.li...
Framer Custom Scrollbar | Breakdown | Free Code Override
มุมมอง 55014 วันที่ผ่านมา
A custom scrollbar in Framer can be achieved using a custom code override to style and control the appearance of the scrollbar. By leveraging CSS properties in the override, you can modify scrollbar width, color, and behavior for both horizontal and vertical scrolling. This allows you to create a modify scrollbar that matches your design aesthetics while maintaining smooth user interactions. Fr...
Responsive Horizontal Scroll Snap Effect using Framer | Free Remix
มุมมอง 1.3K14 วันที่ผ่านมา
If you're a web developer or a passionate UI/Product Designer looking to express your creativity without relying on traditional code, Framer is the perfect choice. Instead of spending hours coding, Framer offers a drag-and-drop, design-friendly environment for web development. I've been working with Framer for almost two years now, and as a UI developer with 7 years of experience in both design...
Framer Advanced Shaped Landing Page | Inverted border radius | Free Remix
มุมมอง 4.7K28 วันที่ผ่านมา
In this video, I break down how to create a responsive landing page using an inverted border radius. As a developer, I've demonstrated how to create basic and advanced shapes using Figma in Framer in one of my previous videos, Link:th-cam.com/video/HNzBK3ZyC50/w-d-xo.html That video was focused on smaller elements like cards, but if you're looking to apply those principles to larger areas like ...
Framer Cursor with Blending Modes Mask over Texts
มุมมอง 1.8Kหลายเดือนก่อน
Applying cursor masking hover effects on text has become a popular trend in the 2023-2024 web tech industry. While many JavaScript libraries offer this interaction, React-based components have proven to be particularly powerful, elevating the effect to a production-grade level. Minh Pham, a well-known TH-camr, showcased this trendy interaction on his website's landing page, sparking widespread ...
Plasmic App Using Supabase Auth | CRUD | Beginners Friendly
มุมมอง 399หลายเดือนก่อน
In this video, I walk you through setting up a local server to host Plasmic, and show you how to integrate Supabase Authentication for user-based table access with relations to POST/GET data and CRUD functionalities. This beginner-friendly tutorial is the only one available online that addresses the Supabase-Plasmic authentication integration. I've included all the necessary details and steps t...
Advanced Web Shapes in Framer Using Figma | Free Remix | Part 1
มุมมอง 3.1Kหลายเดือนก่อน
I'm always excited to explore new website trends. Last year, it was all about morphism, but this year, the focus has shifted to bento cards and their advanced shapes. After checking online, I noticed there's not much discussion or many use cases in the web design industry, even though people are clearly interested. So, I've decided to create a video series on this topic using Figma and Framer. ...
Build Your Business Management App in 5 minutes | Airtable | No Code
มุมมอง 138หลายเดือนก่อน
For Inventory | Product Management | CRM | Project Management In this breakdown, I showed how to create a business management app in just 5 minutes using data from your Airtable. This app will function as an admin panel, allowing you to manage and track your business status directly from your screen. If you have a small agency, you can impress your clients by driving them to your own app, addin...
Interactive Slideshow Using Cursor variant | Framer | No Code
มุมมอง 1.2Kหลายเดือนก่อน
In this video, I break down one of the most hyped Framer component by Damian. This tutorial is basic as well as beginner-friendly, and by following it, you'll be able to apply your own creativity to create custom components-no third-party code needed.
Realistic Physics Effect | Framer | No Code
มุมมอง 1.2K2 หลายเดือนก่อน
In this video I demonstrated how you can achieve a physics effect on Framer using component. I have provided the remix link on comment section. If you have any confusions regarding this topic try to comment. Thanks!
Scroll Bottom Blur Effect Using Framer | 1-Minute Tutorial | No Code
มุมมอง 1.5K2 หลายเดือนก่อน
In this quick tutorial, I demonstrate how to create a bottom-fixed blur effect during scrolling using a no-code component in Framer. This technique was inspired by a component from Nandi at Framer University.
Dynamic Interaction using Framer component | Breakdown 1 | Remix
มุมมอง 1.3K3 หลายเดือนก่อน
In this video, I break down how you can achieve dynamic interactions with Framer web elements using only components, without any third-party tools or code required. The remix file is attached in the comments section.
Animate Anything with Framer | No Code | Beginner Friendly | Part 1
มุมมอง 7483 หลายเดือนก่อน
Welcome to the first video in our series on achieving web animation using Framer components without any third-party software or coding! In this introductory video, you'll learn the basics of how animation works in Framer and how you can create custom animations to make your website lively and modern. Stay tuned for the next video, where we'll dive into more advanced techniques.
Custom Preloader Animation In Framer | Without Code | Only Variants | Remix
มุมมอง 1.4K3 หลายเดือนก่อน
Custom Preloader Animation In Framer | Without Code | Only Variants | Remix
Smooth Scroll Mask Transition Effect Over Image/Video Using Framer | With Remix
มุมมอง 9334 หลายเดือนก่อน
Smooth Scroll Mask Transition Effect Over Image/Video Using Framer | With Remix
Create Smooth Testimonial Reveal Section in Framer With Remix
มุมมอง 3904 หลายเดือนก่อน
Create Smooth Testimonial Reveal Section in Framer With Remix
INVERT CURSOR HOVERING EFFECT UNDER 1.30 MIN | FRAMER
มุมมอง 4.2K5 หลายเดือนก่อน
INVERT CURSOR HOVERING EFFECT UNDER 1.30 MIN | FRAMER
Scroll Text Invert Effect using Framer | 1 Minute Challenge
มุมมอง 1.4K8 หลายเดือนก่อน
Scroll Text Invert Effect using Framer | 1 Minute Challenge
Smooth Scrolling Effect Using Framer | 1 Minute Challenge!
มุมมอง 8278 หลายเดือนก่อน
Smooth Scrolling Effect Using Framer | 1 Minute Challenge!
Dribble Landing Page Clone within 5 Minutes | Made with Framer
มุมมอง 2798 หลายเดือนก่อน
Dribble Landing Page Clone within 5 Minutes | Made with Framer
Interactive Landing Page with Framer | With Remix
มุมมอง 9149 หลายเดือนก่อน
Interactive Landing Page with Framer | With Remix
Horizontal Scrolling Effect In framer | With Remix
มุมมอง 6K11 หลายเดือนก่อน
Horizontal Scrolling Effect In framer | With Remix
Easy Text Color Scroll Effect in Framer
มุมมอง 4.6K11 หลายเดือนก่อน
Easy Text Color Scroll Effect in Framer
Scroll Snap Effect | Custom Scrollbar using Framer
มุมมอง 3.8K11 หลายเดือนก่อน
Scroll Snap Effect | Custom Scrollbar using Framer
Custom Follow Cursor on Framer | Hide Default Cursor
มุมมอง 1.7K11 หลายเดือนก่อน
Custom Follow Cursor on Framer | Hide Default Cursor
Create Framer Custom Form Within 1 Minute | Just Copy-Paste Template
มุมมอง 1.4Kปีที่แล้ว
Create Framer Custom Form Within 1 Minute | Just Copy-Paste Template
Framer Lottie ScrollTrigger Viewport Problem Solved
มุมมอง 685ปีที่แล้ว
Framer Lottie ScrollTrigger Viewport Problem Solved
Coolll.. loved it.. sharing with my frndss😭❤
Glad that you loved it!
<3 Thank you for good quality video
Thanks!
all week i await your video
Means a lot Brother!!
Something new
Let's Go
Yes, let's go!
Beautiful!! Thank you very much
Thanks!
bro you could make the file available for remix
framer.com/projects/new?duplicate=zImOWuA3TaOaptnRyxg0
Thank gou bro, useful and new tyoes of video. Need more advanced video,
Sure!
Please make some more plasmic videos
Yes, I will!
I added the .tsx and .jsx files, I couldn't apply them to the stack as they didn’t appear in the file list :(( can you help?
Please view the breakdown carefully.
Love it bro
Thanks!
I added the .tsx and .jsx files, then I couldn't apply them to the stack as they didn’t appear in the file list
I think you may missed some part, please check the video carefully!
Hey Sham, How can we achieve with 6 images? I tried your calculation in the video but could not distribute the right image on the variant. Can you help me with this? Thanks
You can reach me on my twitter profile. Thanks!
Something new, let's Go
Thanks Nikhil, you should share your progress on my Twitter Inbox.
@@ShamsNahid Sure man
Awesome man! But what if you want to customize that password protected page?
@@rinconello follow the code, you will see css attributes there, you need to apply custom css. but this one is not customizable friendly for nocoders, will come up with advance one soon!
Can you make a video about 3rd party integration, ecom, seo
Please stop using the discord noftification sound. It's really annoying when we went to check the discord just to end up finding nothing.
Seriously Dude! 🙄
Can you show me how to get ruler in framer as your Desktop breakpoint had ruler on top and side ? Great Video btw
Sure! click framer icon on top left corner > View > Show Ruler
very nice
Can you please share the screen recorder name?
Its Inbuilt Mac Feature.
Thankx man, love it
You requested for this!
@@ShamsNahid Thank you for investing your time, love it
Scroll Bar Override Code Generator Link: shamsdigital.medium.com/framer-free-custom-scrollbar-a30f4a33e3a4 Join My Community of 600+ Unique Members in the Dev/Design Industry for Exclusive Support: www.linkedin.com/groups/14274313/
I loved this website ever since I discovered it. I never thought I could make it too! THANK YOU SO MUCH!
Feel good that this helped you!
How do you deal with dynamic layouts with these custom shapes?
There are multiple ways you can deal with that, here is one example th-cam.com/video/Kp10BYJXYQw/w-d-xo.htmlsi=BQBDaF_K44jgSjq1
Whats platform use for layout design ?
Its Framer.com
@@ShamsNahid I think the person meant to ask what you used to sketch the layout.
@@kantaroberts Excalidraw it is.
Thank you Sham, for helping us. Since so many months, I was trying to get this effect and on youtube it was hard to find anything relatable. You did great job to crack this. Grateful. Just a small Suggestion, Once you complete your explanation at last please do preview the flow.
Thanks Mate! and yes i am trying my best to adopt that to teach properly, as you know Its hard to maintain all at a time to make your content super cool after doing your own life task, but I am gradually claiming that ladder, keep me in your prayer so i can make my content more engaging to teach.
Let's Go
🍉
Free Remix File: shamsdigital.medium.com/responsive-horizontal-scroll-snap-effect-using-framer-free-remix-54dee90244e0 Join My Community of 600+ Unique Members in the Dev/Design Industry for Exclusive Support: www.linkedin.com/groups/14274313/
If I want to add this effect to other different vectors of my own then how do i do it?
Follow the same method, just wrap them in a frame first.
Hi brother. Its awesome video thank you so much. And can u explain about SEO, loading speed, sign up, membership, 3rd party integration pleaseeee
Thanks Mate! Yes, those are under queue.
@@ShamsNahid thanks a lot. It will be biggest help of beginners. Eagerly waiting for the detailed video for each one😇
A gem indeed. I also like your desktop background 😀, where did you get it from if I may ask
Aha! I made it. link: linktr.ee/shams.digital
thank you!!
Welcome Mate!
Thanks🔥
🤗Welcome
Wow ! Thanks !
Welcome ! keep spreading!
It's amazing. Can you make the videos with detailed explaination and skip fast forwarding? It will be really helpful for beginners like us. Thanks a lot.
Sorry Mate! Its very hard to manage time to edit longer video. Please slow it down a bit while watching
Amazing work bro!
Thanks Mate!
Absolutely beautiful! Wish the tutorial was alot slower so we could follow
Sorry Mate! Its very hard to manage time to edit longer video. Please slow it down a bit while watching
@@ShamsNahid I understand and appreciate your work. Your talented bro, cant wait to learn more from you 🙏🏽
@@katlegoseanmahaye3309 Anytime!
Absolutely Impressive Shams
Thanks Mate!
keep it up brother! amazing work
Thanks Mate!
Join My Community of 500+ Unique Members in the Dev/Design Industry for Exclusive Support: www.linkedin.com/groups/14274313/ Another Advance Shape Video: th-cam.com/video/HNzBK3ZyC50/w-d-xo.html&t Remix Link:shamsdigital.medium.com/framer-advanced-shaped-landing-page-using-inverted-border-radius-c6edce061be1
Awesome, unfortunately, this is good platform, but not popular. Do u have experience with it?!
Yes its a great tool to publish app faster than ever. But you need to have a basic knowledge over fullstack dev to achieve full control over it. And you can check this video to judge my exp. Thanks.
I Mistakenly omitted the Invert part at the end, but I've explained it in the description and in several comments. Please take a look. Another Cursor Breakdown Video[Framer Cursor with Blending Modes Mask over Texts]: th-cam.com/video/lZgt8XWEOcs/w-d-xo.htmlsi=vNjWrMfRimT2cbid
ayta kono bal er video vaii.....dekibaen na....hudai amon thambline den keno
I accidentally omitted that part, but I've explained it in the description and in several comments. Please take a look.
Ar haa, tomar ei field e time waste na kore er cheye ekta ethical course koro. "How to interact with people politely on a social platform"
Free?
Yes! for limited using. But for commercial, you have to spend.
@@ShamsNahid thanks 😊
In this exact website, on the second section there is a wonderful scroll on reveal text effect that I managed to replicate almost perfectly in wix, but I have no idea how to make it in framer. Would you be able to make a tutorial also for that please?
Its really very specific to make a tutorial like this, but yes you can take a look this video to clear this concept: th-cam.com/video/cENAmceUngg/w-d-xo.htmlsi=yJPBPed6DxUT8Qqv
bad video
Sorry to hear, any specific reason brother?
set the blending of your cursor to difference from effect section.
Is it possible to do this with two photos on top of each other? Because it is not working for me :(.
Yes, you just need to apply override code over the image you are using.
Omg thank you a lot for this video
Glad to help!
Join My Community of 500+ Unique Members in the Dev/Design Industry for Exclusive Support: www.linkedin.com/groups/14274313/ Code File Link: shamsdigital.medium.com/framer-cursor-with-blending-modes-mask-4166b2f4897d
Thank you so much
Thanks Mate!
@@ShamsNahid Hey Shams can you please make a video on how remove and modify browser scrollbar for framer 🙌
@@DrNikhilRavi Hey, you can do that by applying custom css on header section on framer, but for that you will have to buy framer plan, otherwise it wont let you do that. For custom css, go to gpt to create that for you.
Or you can creata a code component and apply that on the main section that cover all page, if you want to ignore premium plan. for code, go to gpt and ask to create a react code component to hide-modify scrollbar
@@ShamsNahid Thankx Bro