- Видео 60
- Просмотров 27 959
Lukas Margerie
США
Добавлен 23 май 2010
Empowering non-technical entrepreneurs to harness the power of digital innovation through low-code solutions.
Animate Text Variants with Scroll Sections in Framer LIKE A PRO!
SUMMARY 🎯
Learn how to build complex scroll-based text animations inspired by Reboot Studio! In this detailed tutorial, I break down both the theory and practical implementation of creating smooth text transitions using Framer's variant and scroll capabilities.
WHAT YOU'LL LEARN:
Component variant setup
Scroll section management
Text transition animations
Complex state handling
Multiple component coordination
Advanced animation techniques
⏱️ TIMELAPSE:
0:00 - Introduction
1:38 - Understanding the Animation Theory
9:40 - Hands-on Implementation
🛠️ TOOLS USED:
Framer: www.framer.com/?via=lukasm
💎 RESOURCES:
Get the template: prismato.lemonsqueezy.com/buy/8b9f3303-f368-4347-a092-dee7feec6cd6
Inspiration: reb...
Learn how to build complex scroll-based text animations inspired by Reboot Studio! In this detailed tutorial, I break down both the theory and practical implementation of creating smooth text transitions using Framer's variant and scroll capabilities.
WHAT YOU'LL LEARN:
Component variant setup
Scroll section management
Text transition animations
Complex state handling
Multiple component coordination
Advanced animation techniques
⏱️ TIMELAPSE:
0:00 - Introduction
1:38 - Understanding the Animation Theory
9:40 - Hands-on Implementation
🛠️ TOOLS USED:
Framer: www.framer.com/?via=lukasm
💎 RESOURCES:
Get the template: prismato.lemonsqueezy.com/buy/8b9f3303-f368-4347-a092-dee7feec6cd6
Inspiration: reb...
Просмотров: 33
Видео
Land Web Design Clients: Custom Proposals with Frameblox (20-Min Tutorial)
Просмотров 2772 часа назад
SUMMARY 🎯 Learn how to create personalized website proposals for potential clients in minutes! I'll show you how to use Frameblox and Framer to quickly design professional websites, perfect for cold outreach and landing new clients. WHAT YOU'LL LEARN: Setting up Frameblox UI Kit Finding potential clients locally Rapid website redesign process Creating personalized proposals Cold outreach strate...
Interactive Product Discovery: Build a UGC Component in Framer
Просмотров 1434 часа назад
SUMMARY 🎯 Learn how to create an interactive product discovery component in Framer! In this tutorial, I'll show you how to build a gallery where users can click on product markers and navigate to specific items - perfect for e-commerce and lookbook websites. WHAT YOU'LL LEARN: Creating interactive image markers Building product selectors Setting up navigation links Implementing hover states Mak...
Welcome to my channel - Lukas Margerie
Просмотров 864 часа назад
This channel is here to invite you to transform your design ideas into reality - without code. Join me as I share unfiltered workflows and solve real design challenges in real-time. Watch my step-by-step process, learn from common roadblocks, and build your next digital product alongside an experienced creator. Subscribe now to start your journey.
Mastering Advanced Dropdown Navigation in Framer (Step by Step)
Просмотров 1417 часов назад
SUMMARY 🎯 Learn how to create a custom dropdown navbar in Framer! Starting with a Kompa component, we'll transform it into a beautiful, modern navigation system inspired by Logan Liffick's design. WHAT YOU'LL LEARN: Setting up Kompa components Customizing dropdown overlays Creating modern hover states Implementing smooth animations Building responsive navigation Advanced styling techniques ⏱️ T...
Create a FULL Website in Minutes with Framify (Dark Mode Included)
Просмотров 3479 часов назад
SUMMARY 🎯 Learn how to build a professional website using Framify's component library! In this step-by-step tutorial, I'll show you how to go from bookmarked components to a complete website with dark mode functionality. WHAT YOU'LL LEARN: Effective component bookmarking Using Framify's starter files Responsive design implementation Dark/Light mode integration Custom styling techniques Inner pa...
Master the Art of Web Design with Google Chrome Shortcuts!
Просмотров 15814 часов назад
SUMMARY 🎯 Learn how to perfectly recreate any website in Framer using Chrome Dev Tools! Watch me clone Apple Watch's hero section and navbar by leveraging browser inspection tools to capture exact measurements, styles, and animations. WHAT YOU'LL LEARN: Using Chrome Dev Tools effectively Extracting exact measurements Capturing color values and styles Rebuilding responsive layouts Recreating ani...
Create Stunning WebGL Animations for your Website - No Coding Required!
Просмотров 40916 часов назад
SUMMARY 🎯 Discover how to add professional WebGL animations to your websites using Unicorn Studio! Watch me explore the platform and build an interactive 3D hero section from scratch in Framer. WHAT YOU'LL LEARN: Unicorn Studio basics Template customization WebGL component creation Framer integration Zero-code advanced web design ⏱️ TUTORIAL HIGHLIGHTS: Dashboard overview Template exploration C...
Supercharge Your Framer Blog UX in Minutes with Framestack!
Просмотров 13119 часов назад
SUMMARY 🎯 Learn how to drastically improve your Framer CMS experience using Framestack! In this tutorial, I show you how to build a professional blog from scratch while implementing powerful components and overrides that enhance user experience in minutes. WHAT YOU'LL LEARN: Introduction to Framestack Essential components overview Building a blog from scratch Implementing smart overrides UX enh...
Launch Your Profitable No-Code Business with FramerForms Today!
Просмотров 19621 час назад
SUMMARY 🎯 Learn how to build and monetize advanced forms with FramerForms in Framer! In this comprehensive tutorial, I show you how to create an advanced freelancer application system that can become your next profitable no-code business. WHAT YOU'LL LEARN: Introduction to FramerForms Complete setup process Integrating forms with Framer Form customization techniques Building advanced workflows ...
Webdesign Workout: Recreating Notion's Landing Page in Framer (Tutorial + Template Download)
Просмотров 267День назад
SUMMARY 🎯 Watch me recreate Notion's stunning homepage hero section in Framer! In this tutorial, I break down how to build their interactive components, responsive navigation, and that sleek CTA section - all while maintaining pixel-perfect design fidelity. WHAT YOU'LL LEARN: Building Notion's responsive navbar Creating interactive card components Implementing smooth hover animations Setting up...
Framer Components: The Fastest Way to Build UI
Просмотров 186День назад
Framer Components: The Fastest Way to Build UI
Building Stripe's Interactive Features in Framer | The Art of Interaction
Просмотров 135День назад
Building Stripe's Interactive Features in Framer | The Art of Interaction
I Built a Responsive E-Commerce Site Without Code
Просмотров 617День назад
I Built a Responsive E-Commerce Site Without Code
Framer Form to Job Application Dashboard: Google Sheets Plugin for Framer
Просмотров 27514 дней назад
Framer Form to Job Application Dashboard: Google Sheets Plugin for Framer
Building a TripAdvisor Clone with Framer CMS | Dynamic Data & Search Function Tutorial
Просмотров 26514 дней назад
Building a TripAdvisor Clone with Framer CMS | Dynamic Data & Search Function Tutorial
I Built the New York Times Website Using Only Framer
Просмотров 28614 дней назад
I Built the New York Times Website Using Only Framer
Figma to Framer Workflow: How I Build Websites from Scratch
Просмотров 56614 дней назад
Figma to Framer Workflow: How I Build Websites from Scratch
awwwards.com Web Design Made in Framer: Free Remix Included
Просмотров 37714 дней назад
awwwards.com Web Design Made in Framer: Free Remix Included
Figma Web Design Tutorial for Beginners (2024): From Zero to Hero
Просмотров 2,3 тыс.14 дней назад
Figma Web Design Tutorial for Beginners (2024): From Zero to Hero
My Favorite Component Library in 2024: Framify (Tutorial Guide + Special Offer)
Просмотров 2,2 тыс.21 день назад
My Favorite Component Library in 2024: Framify (Tutorial Guide Special Offer)
Getting your first No-Code Clients: A Practical Guide for Beginners
Просмотров 30221 день назад
Getting your first No-Code Clients: A Practical Guide for Beginners
Live Build: Personal Website in Framer (Complete Tutorial + Template)
Просмотров 16921 день назад
Live Build: Personal Website in Framer (Complete Tutorial Template)
The Key to Responsive Framer Sites 🔑: Positions, Sizes and Layouts Explained
Просмотров 23221 день назад
The Key to Responsive Framer Sites 🔑: Positions, Sizes and Layouts Explained
Product Demo Component for Framer: Free Remix Link
Просмотров 17721 день назад
Product Demo Component for Framer: Free Remix Link
No-Code Web App Tutorial for Beginners: Building a Marketplace with Framer & FramerAuth
Просмотров 79921 день назад
No-Code Web App Tutorial for Beginners: Building a Marketplace with Framer & FramerAuth
UX/UI Design Portfolio from Scratch: Understanding FramerAuth
Просмотров 26628 дней назад
UX/UI Design Portfolio from Scratch: Understanding FramerAuth
Framer CMS: Crash Course for Beginners
Просмотров 47528 дней назад
Framer CMS: Crash Course for Beginners
UX/UI Design Portfolio from Scratch: Introduction
Просмотров 64428 дней назад
UX/UI Design Portfolio from Scratch: Introduction
Build a stunning Awwwards page with no-code
Просмотров 248Месяц назад
Build a stunning Awwwards page with no-code
Awsome content Lukas! Would love to see the ecommers video. Also, i have not seen any youtuber explain how the handover process to a client will look. Would you mind explaining how that would work regarding handing over website under a domain and how they come to make it theirs
Hey Omar, thanks for the comment! Now is such a good time to get ecommerce clients (designing in Framer as a frontend and Shopify as backend). Of course, that's actually a great idea. I can add this to my list of videos to film. Will keep you updated!
Thanks brother, could you make a video about how do we find framer clients 😊
I mean this is one way of doing it. The other best way is by doing free stuff for people in the community.
Awesome 🙌🔥
Awesome product makes an awesome video!
We can mix this tool with framify or you do not recommend doing this because there could be a collision between the two tools ?
Good question: you can definitely combine them, you would just have to replace the fonts at the end of building and make sure everything is fine with the stack structure in the layers panel.
it's really helpful to see this kind of process
Happy it’s helpful! If you have more questions please let me know
More great content Lukas - thanks!!
Thank you man! If you have any ideas or questions please feel free to reach out
Great content, as always! Just a quick off-topic question: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?
Nope
Nope
so smart ! huge creativity
hey very nice, do you have any framer tutorials? keep it up!
Yeah! Actually a lot of my videos are Framer vids. Are you completely new to Framer?
@@lukas-margerie Yup, im new
Me 2🙂@@lukas-margerie
@@lukas-margeriereally need a mentor but I think iv found already 🙂↕️😌 thanks man keep up the good work
@ really kind words… feel free to always reach out if you have questions.
excited bro! thank you so much
You can create hero carousel with handmade component, not premade slider
Yes of course, but it’s always best to save time
Audio is soft after 1 min mark when you are in framer
I know, I cut the build part from a longer video and I used a different microphone.
Great intro bro! I'm also obsessed with almost everything related to design and additionally, you know how to grow a channel! 😊👍
Amazing! Join my discord channel, and lets talk to see how you can start with yours! :)
A creator who listens to his community. Honestly very strong! It's impressive how quickly you get content out. Thank you so much
My pleasure!
daaaamn your are really awesome ! thanks for your gem
Thanks! You are also awesome
Lukas, do you record yourself with your phone? Via Screen Studio?
Bingo ;)
HEY, LUKAS i am starting my web designer freelancing jourmey thanks to your videos! I was wondering what software you are using to do screen recordings, im interested in doing the same thing for my clients. Thank you in advance!
That’s awesome! I’m happy to help. Have you glanced a client already? Join my discord so we can chat I use screen studio, but for clients something free like look should work well.
@lukas-margerie ill join! Ill definitely check it out.
The demonstration was just excellent. This tool is a gem. During your demonstration you showed that a template with framer auth was available. But for example if the template requires a third-party tool, is it possible to offer it for sale as a template on the framer platform. Another question, do you know a tool that allows you to create multistep form for framer
Thanks for the love and nice feedback! Yes, the best tool is Framerforms, and I have a tutorial video on this here: ruclips.net/video/wxJzMe7x43I/видео.html You can use my code LUKAS to get a discount while checking out.
Hey bud can you increase the volume from next time
Yeah, these are one of my “older” videos, but I just got a new mic
Damn U lesson your community ! Thanks for this video very useful
I always try to make videos based on the comments i get
Thanks for doing this. Found your comment on "How to learn Framer" post on X.
awesome , i like that ! super simple
Know it but not tried it, amazing !
Sign up for it and check it out yourself 😁
Framer has a nicer UI than Wordpress- I'll give it that. Cool!
Thank you for this kind of video which clearly does not exist on the RUclips Game regardless of the Nocode tool. It's super interesting to know how to interpret the inspector and then develop on Framer! Many thanks for this gem. This will allow us to train ourselves to have this new Framer developer skill.
Glad it helped!
super chuli
Can you share your email or Instagram account?i want to discuss something
Super cool!
Thanks, man! You are dropping fire every day.
Thanks man! It’s a lot of stress and work but I’m trying my best to post and improve my content!
bro's been dropping banger tutorial...keep it up man, i for one am learning alot and cannot wait to implement and grow my framer skills
@@IsaOdoma thanks my friend!
it works for webgl or threejs components?
yes, you can embed or create components for webgl/threejs code. Would you be interested in a video about this?
@ it would be fantastic and also if you made a series… it would be absolutly amasing, like for example, i been using unicorn studio, if you make a vídeo of this making this effects with ai, man, you will have a ver good content
@@glagraphy6533 oh nice! Unicorn studio is exactly what I wanted to talk about as well! I just got access last night and it works like a charm with Framer. I will look into this :)
Hey man! Just uploaded a video on unicorn studio. It’s more of a basic tutorial, but I can go more advanced next time :)
@ thanks man! Its easy yo use it i dont have any problem but if there is a way of making the distord liquify and all these effect by code using ai it would be super!
Thanks, Lukas
Nice! Great use case.
I think so too!
Thank you so much, buddy, for creating and demonstrating exactly what I asked for. You’re incredibly quick-just a day after I requested it, you've already put together this fantastic tutorial! I’m seriously impressed by your dedication and the quality of your work. It's absolutely amazing! bro that's much I am asking you but cms is still not clear can you create an dedicated video on the cms system designing the trips, packages pages,
Hey man, you inspired this video by the way! I'm happy you enjoyed it. And yes, of course, I would be more than happy to help you with CMS, especially advanced CMS. For this I will put it on my list, but it has to wait a bit because I have a few other videos that I have to film before, hope thats ok! Anyways, I wish you a terrific day full of motivation and thanks for watching <3
Hi, thanks to share your process with inspector for undestand better how it build a onther website. Do you have a complet video on inspector or maybe can you advice a content for learn more about that. Awesome rebuilt
Hey Flo, thats a terrific idea! If you properly know how to use the inspector tools, you can truly clone anything you want from the browser.
@lukas-margerie yeah exactly something I try to understand how website is build but I havent best practice with inspector and in youtube nobody have a video with framer for explain how make this tricks. That will be awesome to see that
@@FloNocode awesome, it is in my list now :) stay tuned my friend!
@@lukas-margerie Really ! Awesome thx
Just posted a video on this!
how to join the discord channel bro
Here you go: discord.gg/xsYVQSNg7R
YOU ARE A LEGEND!
thx!!
Thank you soooo much for this video, can you teach us about HubSpot integration and its usage, please
You want like a full tutorial on all HubSpot integrations? Or something in specific?
@@lukas-margerie Most of the client asked to collect user data and sending automatic Gmail or WhatsApp message. And If you are ok go with a trending usage of HubSpot integration.
Advance tools indeed. Need to learn more
For sure, do you want to build anything in particular?
short tuts like this is amazing, better to understand the idea, bcz it will focus on one thing, keep it like this if u can, great job!
Nice
Muito obrigado my friend
Awesome ! Thanks for this pure masterclass. You don't share the remix ?
thanks so much! The remix link is in the description.
A full bro! Seguí así! 💣💣💣
Todos los dias! Sin parar ➡🏆
Amazing concept ❤❤
Great ! I want this. Does each or many components and so on have wireframes like framepad ? Because most of time we start with wireframes with clients. How do you manage this step ? 😅 Other point: For instance we can install framepad for styleguide (colors and fonts) and use framify with copy paste ? Third: have you ever used Blocs plugin ? Seems maybe less mature or different 🧐
@@kamiG74 good question Kami. I usually tend to build branded wireframes for my clients. The problem with Framepad is that if you build the website just using framepad components, it tends to look to basic and blocky for the client (atleast that’s my experience) With Framify you have a higher diversity of options and, eventhough they are not the traditional grey/white wireframes, you can still make them look more like wireframes by replacing the images/text/color very easily and the wireframe would look even more like a design…. But at the end of the day it’s your call
@@lukas-margerieThanks Lukas for your answer. Good idea for « mid mockups » to present to client. In addition you don’t start from scratch so don’t loose time if something is not liked by the client 👍🏼. So you mean « branded wireframes » not the final UI design if adjustment needed. Indeed I’ve noticed also that client are not such sensitive at this design stage. Thank you !
Thank you for your effort, to hide the grid line for windows is shift +G.
Thanks! Yes, its shift for Windows but I've got a Mac, so for me it's control + G
@@lukas-margerie I will edit my comment. Thank you
@ How can I send you a dm?
@@Mobiletechmysteries x.com/lukas_margerie you can dm me here :)
Woaouuu marketplace with Framer 💪🏼. Is it efficient in term of speed ? Comparing bubble for instance. On top, framer auth was it enought, maybe outseta offers more features ? Nb : your discord link is expired 😊
Hi Kami! First of all, thanks for letting me know the dc link is expired, you can join here: discord.gg/vZxn6wZrDD And yes! Crazy right? It is really efficient in terms of speed, Framer is fast ⚡️FramerAuth is more than enough if you want to create a simple marketplace. Stay tuned as I will soon film a long-form build/podcast with the founder of FramerAuth and I can talk about this comment there!
@@lukas-margeriei am in your Dc now 😊. Great content video bravo 👏🏼. I stay tuned 🔥
Hey lukas you are the true framer guru who is creating actual helpful website which we can learn and sell to our clients and earn a decent money 💰 I am an first year students your tutorials around cms has helped me a lot And successful made some what around 300 usd from fiverr and framer thank you so much 300 usd is a lot for me as it's equal to my semester fees thanks lot of love from india
happy to help, man!
Lukas sir Ai have taken the landing pages job only cms can save us now! Please Lukas bro create a video extensively around CMS driven website maybe Tripadivsor or any real estate listing website or maybe Airbnb would be an create example to it
of course! Stay tuned, as I will be launching exciting content about this in the near future.
Thank you so much lukas 🙌 true A CMS is the best feature of framer please sir please can you create a video on around cms around travel agency website or something like airbnb
sure! so would it be something like a CMS collections of homes with different filtering? Thanks again for your support!