Lukas Margerie
Lukas Margerie
  • Видео 60
  • Просмотров 27 959
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...
Просмотров: 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

Комментарии

  • @omarprado541
    @omarprado541 12 часов назад

    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

    • @lukas-margerie
      @lukas-margerie 12 часов назад

      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!

  • @kafiahammed3548
    @kafiahammed3548 18 часов назад

    Thanks brother, could you make a video about how do we find framer clients 😊

    • @lukas-margerie
      @lukas-margerie 15 часов назад

      I mean this is one way of doing it. The other best way is by doing free stuff for people in the community.

  • @soltwagner
    @soltwagner 20 часов назад

    Awesome 🙌🔥

    • @lukas-margerie
      @lukas-margerie 15 часов назад

      Awesome product makes an awesome video!

  • @FloNocode
    @FloNocode 22 часа назад

    We can mix this tool with framify or you do not recommend doing this because there could be a collision between the two tools ?

    • @lukas-margerie
      @lukas-margerie 15 часов назад

      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.

  • @FloNocode
    @FloNocode 22 часа назад

    it's really helpful to see this kind of process

    • @lukas-margerie
      @lukas-margerie 15 часов назад

      Happy it’s helpful! If you have more questions please let me know

  • @jarosoho2049
    @jarosoho2049 День назад

    More great content Lukas - thanks!!

    • @lukas-margerie
      @lukas-margerie День назад

      Thank you man! If you have any ideas or questions please feel free to reach out

  • @ChelseaChu-u6u
    @ChelseaChu-u6u День назад

    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?

  • @FloNocode
    @FloNocode День назад

    so smart ! huge creativity

  • @Atseo
    @Atseo День назад

    hey very nice, do you have any framer tutorials? keep it up!

    • @lukas-margerie
      @lukas-margerie День назад

      Yeah! Actually a lot of my videos are Framer vids. Are you completely new to Framer?

    • @Atseo
      @Atseo День назад

      @@lukas-margerie Yup, im new

    • @ELOHIMQUOTES
      @ELOHIMQUOTES 14 часов назад

      Me 2🙂​@@lukas-margerie

    • @ELOHIMQUOTES
      @ELOHIMQUOTES 14 часов назад

      ​@@lukas-margeriereally need a mentor but I think iv found already 🙂‍↕️😌 thanks man keep up the good work

    • @lukas-margerie
      @lukas-margerie 14 часов назад

      @ really kind words… feel free to always reach out if you have questions.

  • @class2444
    @class2444 День назад

    excited bro! thank you so much

  • @shuhratsharifov21
    @shuhratsharifov21 День назад

    You can create hero carousel with handmade component, not premade slider

    • @lukas-margerie
      @lukas-margerie День назад

      Yes of course, but it’s always best to save time

  • @johnacsyen
    @johnacsyen День назад

    Audio is soft after 1 min mark when you are in framer

    • @lukas-margerie
      @lukas-margerie День назад

      I know, I cut the build part from a longer video and I used a different microphone.

  • @AkinsRealm
    @AkinsRealm 2 дня назад

    Great intro bro! I'm also obsessed with almost everything related to design and additionally, you know how to grow a channel! 😊👍

    • @lukas-margerie
      @lukas-margerie 2 дня назад

      Amazing! Join my discord channel, and lets talk to see how you can start with yours! :)

  • @FloNocode
    @FloNocode 2 дня назад

    A creator who listens to his community. Honestly very strong! It's impressive how quickly you get content out. Thank you so much

  • @FloNocode
    @FloNocode 2 дня назад

    daaaamn your are really awesome ! thanks for your gem

  • @abcdefggg5658
    @abcdefggg5658 2 дня назад

    Lukas, do you record yourself with your phone? Via Screen Studio?

  • @abcdefggg5658
    @abcdefggg5658 3 дня назад

    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!

    • @lukas-margerie
      @lukas-margerie 2 дня назад

      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.

    • @abcdefggg5658
      @abcdefggg5658 2 дня назад

      @lukas-margerie ill join! Ill definitely check it out.

  • @FloNocode
    @FloNocode 3 дня назад

    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

    • @lukas-margerie
      @lukas-margerie 3 дня назад

      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.

  • @Z22-y7x
    @Z22-y7x 3 дня назад

    Hey bud can you increase the volume from next time

    • @lukas-margerie
      @lukas-margerie 3 дня назад

      Yeah, these are one of my “older” videos, but I just got a new mic

  • @FloNocode
    @FloNocode 4 дня назад

    Damn U lesson your community ! Thanks for this video very useful

    • @lukas-margerie
      @lukas-margerie 4 дня назад

      I always try to make videos based on the comments i get

  • @kayodedesign
    @kayodedesign 5 дней назад

    Thanks for doing this. Found your comment on "How to learn Framer" post on X.

  • @FloNocode
    @FloNocode 5 дней назад

    awesome , i like that ! super simple

  • @kamiG74
    @kamiG74 5 дней назад

    Know it but not tried it, amazing !

    • @lukas-margerie
      @lukas-margerie 5 дней назад

      Sign up for it and check it out yourself 😁

  • @pacesferry
    @pacesferry 5 дней назад

    Framer has a nicer UI than Wordpress- I'll give it that. Cool!

  • @FloNocode
    @FloNocode 5 дней назад

    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.

  • @user-ou3bj6de7n
    @user-ou3bj6de7n 7 дней назад

    super chuli

  • @pratikproduction8145
    @pratikproduction8145 7 дней назад

    Can you share your email or Instagram account?i want to discuss something

  • @juliafadeicheva2272
    @juliafadeicheva2272 7 дней назад

    Super cool!

  • @huzaifahasan6272
    @huzaifahasan6272 7 дней назад

    Thanks, man! You are dropping fire every day.

    • @lukas-margerie
      @lukas-margerie 7 дней назад

      Thanks man! It’s a lot of stress and work but I’m trying my best to post and improve my content!

  • @IsaOdoma
    @IsaOdoma 8 дней назад

    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

  • @glagraphy6533
    @glagraphy6533 8 дней назад

    it works for webgl or threejs components?

    • @lukas-margerie
      @lukas-margerie 8 дней назад

      yes, you can embed or create components for webgl/threejs code. Would you be interested in a video about this?

    • @glagraphy6533
      @glagraphy6533 8 дней назад

      @ 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

    • @lukas-margerie
      @lukas-margerie 8 дней назад

      @@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 :)

    • @lukas-margerie
      @lukas-margerie 7 дней назад

      Hey man! Just uploaded a video on unicorn studio. It’s more of a basic tutorial, but I can go more advanced next time :)

    • @glagraphy6533
      @glagraphy6533 7 дней назад

      @ 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!

  • @wizkid7717
    @wizkid7717 9 дней назад

    Thanks, Lukas

  • @essadonzo3152
    @essadonzo3152 9 дней назад

    Nice! Great use case.

  • @class2444
    @class2444 9 дней назад

    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,

    • @lukas-margerie
      @lukas-margerie 9 дней назад

      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

  • @FloNocode
    @FloNocode 9 дней назад

    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

    • @lukas-margerie
      @lukas-margerie 9 дней назад

      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.

    • @FloNocode
      @FloNocode 9 дней назад

      @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

    • @lukas-margerie
      @lukas-margerie 9 дней назад

      @@FloNocode awesome, it is in my list now :) stay tuned my friend!

    • @FloNocode
      @FloNocode 9 дней назад

      @@lukas-margerie Really ! Awesome thx

    • @lukas-margerie
      @lukas-margerie 5 дней назад

      Just posted a video on this!

  • @MaxBat-k8c
    @MaxBat-k8c 11 дней назад

    how to join the discord channel bro

  • @timilehinsolu4254
    @timilehinsolu4254 11 дней назад

    YOU ARE A LEGEND!

  • @unsa101
    @unsa101 11 дней назад

    Thank you soooo much for this video, can you teach us about HubSpot integration and its usage, please

    • @lukas-margerie
      @lukas-margerie 11 дней назад

      You want like a full tutorial on all HubSpot integrations? Or something in specific?

    • @unsa101
      @unsa101 11 дней назад

      @@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.

  • @realBlue2024
    @realBlue2024 11 дней назад

    Advance tools indeed. Need to learn more

    • @lukas-margerie
      @lukas-margerie 11 дней назад

      For sure, do you want to build anything in particular?

  • @LanguagedesignLearn
    @LanguagedesignLearn 13 дней назад

    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!

  • @ricardogoes231
    @ricardogoes231 14 дней назад

    Nice

  • @FloNocode
    @FloNocode 15 дней назад

    Awesome ! Thanks for this pure masterclass. You don't share the remix ?

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      thanks so much! The remix link is in the description.

  • @AlanDeepARG
    @AlanDeepARG 15 дней назад

    A full bro! Seguí así! 💣💣💣

  • @dollarproduction0
    @dollarproduction0 15 дней назад

    Amazing concept ❤❤

  • @kamiG74
    @kamiG74 15 дней назад

    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 🧐

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      @@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

    • @kamiG74
      @kamiG74 15 дней назад

      @@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 !

  • @Mobiletechmysteries
    @Mobiletechmysteries 15 дней назад

    Thank you for your effort, to hide the grid line for windows is shift +G.

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      Thanks! Yes, its shift for Windows but I've got a Mac, so for me it's control + G

    • @Mobiletechmysteries
      @Mobiletechmysteries 15 дней назад

      @@lukas-margerie I will edit my comment. Thank you

    • @Mobiletechmysteries
      @Mobiletechmysteries 15 дней назад

      @ How can I send you a dm?

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      @@Mobiletechmysteries x.com/lukas_margerie you can dm me here :)

  • @kamiG74
    @kamiG74 15 дней назад

    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 😊

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      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!

    • @kamiG74
      @kamiG74 15 дней назад

      @@lukas-margeriei am in your Dc now 😊. Great content video bravo 👏🏼. I stay tuned 🔥

  • @techbrand5626
    @techbrand5626 15 дней назад

    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

  • @rajasingh-m8g
    @rajasingh-m8g 15 дней назад

    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

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      of course! Stay tuned, as I will be launching exciting content about this in the near future.

  • @brandbuilders165
    @brandbuilders165 15 дней назад

    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

    • @lukas-margerie
      @lukas-margerie 15 дней назад

      sure! so would it be something like a CMS collections of homes with different filtering? Thanks again for your support!