Explore carefully curated Framer tutorials, tips, tricks, and courses.
Weekly Digest
Submit Your Framer Link
While I'm building a fancy submission form, you can send your favorite Framer links to hey@hyperframer.com or mention @hyperframercom on X/Twitter. If it's a good one, I'll add it in a couple of days.
March 21, 2024 13:39
March 21, 2024
Zero To Hero Course · A Framer Masterclass
Discover Framer mastery with the Zero To Hero Course. Get expert, step-by-step guidance to redefine your design capabilities.
January 31, 2024 12:47
January 31, 2024
Update: January 2024
Explore the January 2024 Framer update, featuring enhanced Rows and Columns Stack presets, new Video tool, and improved Gap & Padding controls. Stay up-to-date with our Framer tutorial.
January 10, 2024 17:17
January 10, 2024
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Explore the step-by-step, no-code tutorial on creating rolling text animation in Framer with this YouTube video. Start your new project now!
December 13, 2023 21:46
December 13, 2023
Framer University on X #49681
Framer sites are fast. But how can you make them lightning-fast? Here's the only @Framer site optimization guide you'll ever need:
December 2, 2023 21:02
December 2, 2023
Component Effects
Explore the latest Framer update! Learn about new Component Effects such as Drag, Hover, Scroll Animations in an easy-to-follow Framer tutorial.
December 1, 2023 10:27
December 1, 2023
Localization: AI Style
Discover AI's role in localization with YouTube's Pro Locale Add-On or Enterprise Plan. Learn more about adding a custom AI Style.
November 30, 2023 18:10
November 30, 2023
Create Awesome "Add to Cart" Button Animation in Framer | Beginner Tutorial
Learn to create an engaging "Add to Cart" button animation using Framer in this beginner-friendly tutorial. Explore more Framer remixes on our channel.
November 29, 2023 23:52
November 29, 2023
Update: Page Effects (View Transitions)
Explore Framer's latest feature, Page Effects, which allows you to animate between pages seamlessly, enhancing your design experience.
November 29, 2023 1:08
November 29, 2023
Update: Asset Search
Explore new ways to work with Assets in Framer's November Update featuring enhanced style searches in the Actions Menu.
October 14, 2023 1:01
October 14, 2023
Shams ⚡️Nahid on X #23451 #23642
Dear @framer Community, I have resolved a common problem where keeping the Parent Device "overflow visible" without expanding the screen on the right side. I am excited to introduce a solution. Let's get started ↓ @benjaminnathan @learnframer @aleksliving
October 13, 2023 23:26
October 13, 2023
Framer Tutorial: Recreating The Apple Siri Website with Chat-GPT Code
Learn to recreate the Apple Siri website with our easy-to-follow Framer tutorial. Master the basics of Framer remix in this educational YouTube video.
October 13, 2023 21:20
October 13, 2023
Build a membership site in Framer
Discover how to build a membership site using Thenty in our new practical Framer tutorial. Start creating web apps and more with Framer today!
October 13, 2023 20:23
October 13, 2023
Framer Tutorial: Master Mobile Responsiveness
Master mobile responsiveness with this Framer tutorial on YouTube. Learn to create custom forms as part of the Framer Masterclass series.
October 9, 2023 17:39
October 9, 2023
Framer tutorial: Animated Border in 2 minutes (No-code)
Learn to create an animated border in just 2 minutes with this easy, no-code Framer tutorial. Ideal for Framer beginners.
October 7, 2023 12:36
October 7, 2023
#2 Creating a Dynamic Counter — Mastering Framer Code Overrides
Learn to build powerful code overrides and use the store to share UI state between elements in this Framer tutorial. Boost your Framer skills now!
October 6, 2023 12:14
October 6, 2023
#1 Intro to Code Overrides — Mastering Framer Code Overrides
Dive into understanding code overrides in Framer with our comprehensive guide. This tutorial, packed with links to useful resources, walks beginners through the basics and complexities of Framer code overrides.
October 3, 2023 18:14
October 3, 2023
Framer Updates: Localization with AI
Explore the importance of website localization and how Framer's new features make it easier than ever. Translate and preview site content, with AI assistance and automated elements for a seamless experience.
September 20, 2023 20:45
September 20, 2023
The Mighty Motion Guide, a Framer Motion course and guide.
September 19, 2023 14:42
September 19, 2023
Apple Watch Series 9 Site Recreated in Framer - Framer Resource
This is an unofficial recreation of a segment from the Apple Watch Series 9's website. It's an awesome project that showcases Framer's exceptional ability to create top-notch websites, all without writing a single line of code.
September 12, 2023 17:50
September 12, 2023
Framer Updates: CMS: Bold & Italic
This week's CMS update brings improvements to the content editing workflow. With the new bold and italic options in Text Styles, you can emphasize your text with granular control of the fonts, and these are auto-applied to all Text Styles using built-in Web fonts. On top of that, we have added Required Fields and Max Length options in CMS Fields. These empower you to configure constraints for your content, ensuring that even with 100s of CMS items, your site will match your design.
September 7, 2023 19:20
September 7, 2023
Framer Updates: An All-New Cookie Banner Component
Today, we're introducing the Cookie Banner Component. The Component allows you to set up a complete cookie consent system through Google Tag Manager. It's fully integrated with Google's Consent Mode, which allows you to activate Google services, third-party integrations, or custom scripts only when the appropriate consent has been obtained. You can customize everything from text to the appearance to ensure it blends seamlessly with your website.
September 2, 2023 14:20
September 2, 2023
Lemon Squeezy Checkout on a Framer Website - Framer Resource
This is an easy overlay interaction that allows you to implement a checkout experience on your Framer website. Oh, and the best part is that this requires zero code, since we're embedding the Lemon Squeezy checkout page on our website.
September 2, 2023 14:20
September 2, 2023
6 Ways to Make Money With Framer
Maximize your income with Framer. From selling templates to joining the Framer Partner Program, explore ways to monetize your Framer skills.
August 29, 2023 11:50
August 29, 2023
Zulal on X #23655
Excited to share yet another @framer tutorial and remix 🥳 ⛵️ Magnifying glass navigation. Remix: https://t.co/eF8aQrl9sR Tutorial 👇🏻
August 25, 2023 2:20
August 25, 2023
Framer University on X #23654
Did you know this? 🤯 With a recent update, you can now create these staggered animations in @Framer. Here's how: 👇
August 13, 2023 18:16
August 13, 2023
Cédric 🏴 on Twitter #23831
"I see many posts about nesting components in @framer in the last few days. You actually can do this easily with variables. https://t.co/c9dVkjsZXh" / X
August 11, 2023 0:16
August 11, 2023
Framer Updates: Scroll Direction
In this update, we're introducing a new way to trigger Scroll Effects: On Scroll. Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down, so they can enjoy your page content distraction-free. You can use this new Trigger type with both Scroll Animations and Scroll Variants—unlocking powerful new navigation patterns.
August 10, 2023 3:32
August 10, 2023
Framer University on Twitter #23651 #27114
"I use 50+ components for my upcoming @Framer learning platform. To keep them organized, I use the following naming method: [Folder] / [Component name] By using this method, you can easily categorize your components into folders. https://t.co/WwfFSEn1KC" / X
!["I use 50+ components for my upcoming @Framer learning platform. To keep them organized, I use the following naming method: [Folder] / [Component name] By using this method, you can easily categorize your components into folders. https://t.co/WwfFSEn1KC" / X](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/64f875c5e39ebaced2ece00d_1694004675_64f875b3fd895e1ee85a76b9.jpeg)
August 10, 2023 3:30
August 10, 2023
Framer University on Twitter #23833
"I use 50+ components for my upcoming @Framer learning platform. To keep them organized, I use the following naming method: [Folder] / [Component name] By using this method, you can easily categorize your components into folders. https://t.co/WwfFSEn1KC" / X
!["I use 50+ components for my upcoming @Framer learning platform. To keep them organized, I use the following naming method: [Folder] / [Component name] By using this method, you can easily categorize your components into folders. https://t.co/WwfFSEn1KC" / X](https://cdn.prod.website-files.com/6448e2a9aa54ae779a96bcdb/64f875de485897b9e0242765_1694004700_64f875cab7abd2130278588d.jpeg)
August 7, 2023 19:01
August 7, 2023
Framer Tutorial: Interactive Pricing Cards
Check out our Framer tutorial on YouTube, where we guide beginners on how to create interactive pricing cards using Framer remix for a seamless transition.
August 7, 2023 14:01
August 7, 2023
NomanDesigns on Twitter #23659
I have noticed that some people are confused about when to use code overrides or code components in @framer. These powerful tools extend Framer's capabilities, but they serve different purposes. Let me break it down for you👇
August 3, 2023 13:02
August 3, 2023
Framer University on Twitter #23656 #27116
"My @Framer page structure: 1. Create large frame 2. Set HTML tag to "Main" 3. Place all content in this frame 4. Exclude footer and navigation This will greatly improve the webpage structure, leading to better understanding by search engine bots. https://t.co/vUq0K1voQe" / X
August 2, 2023 19:30
August 2, 2023
Joshua Guo on Twitter #23653 #27115
"Looking to boost your website's Lighthouse Score? As a @framer expert, I've compiled some professional tips to help skyrocket your website's performance. Let's dive in and optimize your Lighthouse Score 🚀 https://t.co/r3EBwWqggo" / X
August 1, 2023 11:02
August 1, 2023
Build a Framer Membership Website using Outseta. Step by step video tutorial. Sell membership plans with Stripe. Setup protected pages and more.
"Explore this step-by-step Framer tutorial on YouTube, learning how to build a membership site using Outseta and integrate Stripe for easy payment handling."
July 26, 2023 22:30
July 26, 2023
How to Create Stunning Code Overrides for Framer (Easy!) - Framer Overrides — Powerful Framer Code Overrides
Unlock new superpowers with effortless copy & paste code overrides for Framer — no coding required.
July 26, 2023 13:10
July 26, 2023
Ashwin Pradeep Kumar on Twitter #23660
10 @framer shortcuts to speed up your workflow:
July 24, 2023 22:10
July 24, 2023
Framer Tutorial: Dynamic Table of Contents (CMS)
Learn to create a dynamic, user-friendly table of contents in Framer with this tutorial. No coding needed - just enhance navigation like a pro.
July 20, 2023 18:10
July 20, 2023
Framer Tutorial: Advanced Scroll Zoom Animation
Explore the art of creating a captivating Zoom Effect on websites with our advanced Framer tutorial. Master Framer remix with our step-by-step guide.
July 18, 2023 21:10
July 18, 2023
Framer Updates: July Update
The July Update is all about gradients. We're introducing support for Multi-Stop Gradients, Conic Gradients, and more. We've redesigned our Fill Picker with a brand new UI, including an inline Gradient editor. Plus, component insertion got a lot faster, adding component interactions got easier, and more.
At Hyperframer, we believe that knowledge sharing is key to success. That's why we've put together an expertly curated selection of the most insightful Framer tutorials, tips, tricks, and courses. Whether you're a beginner just starting your Framer journey or an experienced designer looking to sharpen your skills, we've got you covered. Explore our vast resources and empower your design capabilities.