I created a toast popup in
@Framer
with 0 code!
Component includes:
-Customizable trigger state
-Manual / auto dismiss
-Optional redirect link
inspired by by
@marc_louvion
P.S. Toasts are a great way to increase conversions :)
Remix link in replies👇
How to optimize
@Framer
loading speed
A 2-minute thread🧑💻
Why care? Fast loading boosts SEO & user experience, helping you get discovered and increasing conversions
Fact: The average person leaves after 2-3 seconds of loading
Here's how to improve loading in Framer👇
(❤️+Save)
Happy to launch 🥳
Save your most-used/favorite
@Framer
components in one place, making them easy to access across projects.
You can also share your components for others to use!
Sign up for free:
SOUND ON👇
I got early access to
@Framer
's new update, which means I had some time to play with it... I came up with 3 DOOOPEE use cases that were impossible before this update & already recorded a tutorial. Stay tuned!
Having some good ol'
@Framer
fun!
Made this quick "Lock screen app" website inspired by some designs I saw earlier...
What do you think?
Should I share the remix link?
If you're a
@Framer
user listen up!
I've been in talks with the lovely
@Framer
team, working on some top-secret plugins for you guys! I'm finally ready to share what I (alongside
@YahyaCodes
) have been cooking so far🧑🍳
Revealing alotta juicy info in this thread. buckle up👇
Join our 404 page
@dribbble
playoff! Design and launch a 404 page in Framer for a chance to win a brand new iPad Air, AirPods 3rd Gen, or a year of Framer Pro! 🔗 Link below
New vid👉 Powerful
@Framer
CMS upgrades using
@SegmentUI
I show how to implement pagination, real-time search, previous/next buttons & more, using the SegmentUI Kit.
Watch the full video here:
Packed with value as always.
Enjoy :)
@itsnotnabeel
🚨New
@Framer
video tutorial! 🎥
Learn to make horizontal & verticle progress bars using absolutely no code! (In just 2 Minutes!)
Packed with value as always - This is super useful :)
Enjoy 😄
Just hit 1000 subscribers on YouTube and 200 here on Twitter! 🎊😁
Big shoutout to the
@Framer
team for making such an awesome tool & an even bigger thanks to you guys, the
@Framer
community, for tuning in and showing love for my content!🙏
Lots more to come! Stay tuned -Tay✌️
@Framer
forms are out!
You can remix my 3D Form component here:
Live preview:
I added a few more input field options like selection & date.
...it's so fun to just play around with😅
I'm making a video where I recreate websites in
@Framer
and show you how I do it.
Reply to this tweet with cool websites, sections, or components you want me to look at👇
🚨New Framer video alert
How to Find Clients & Sell
@framer
Websites
This is super insightful to folks looking to monetize their passion & also for current freelancers
This vid is paaccked with value. I go over my entire sales & delivery process
Watch👉
@Framer
Hero Sections are crucial - unlike other sections, they are tasked to solely grab visitors' attention and ensure they stay
I created a slick collection of hero sections to help you spice up your
@Framer
sites, inspired by top web experts
Preview:
@Framer
has been a game changer not only for web development but also for design & prototyping. The workflow beats Figma's by miles. I ditched Figma completely, even for design-only projects - I do it all in Framer.
To any UI designers considering making the full switch - Do it.
New
@Framer
tutorial is out!
I go over some quick yet important design rules that everyone should use!
You can watch it here:👇
Also working on a more in-depth article about this topic for
@theryanhayward
's blog - stay tuned!
Firstly, you may or may not be aware I announced
@getseomizer
a while back - a powerful Framer SEO copilot. Recently the folks at
@framer
were kind enough to let us turn the extension to an official plugin, so if you haven't already - join the waitlist:
People always ask me "How can I learn to be good at
@Framer
like you?"
Instead of only answering those who asked me, I thought I'd share my answer here for everyone to see.
It's simple👇
@Framer
takes care of many technical aspects of SEO, but not all of it. Here are extra tips to boost SEO👇
1. Integrate structured data
2. Use unique metadata on each page
3. Make your site responsive
4. Use user-friendly URLs
5. Ensure accessibility (tags, alt text, colors)
@Framer
Lesson: Color Ratio (2 Minute Thread)
CR is the difference in brightness between 2 colors. Higher value differences mean better contrast
Text should have a ratio of at least 4.5:1 (3:1 for large text)
Here's why it matters & how to ensure a good ratio👇
(Like❤️ + Save)
The ULTIMATE dynamic table of contents in
@framer
What it does:
Automatically detects titles based on the page's text
highlights the current section that's being viewed
has smooth scroll
clips text
Video coming very soon! Stay tuned :)
(in collaboration with
@ClementLIONNE
)
👇
We've also been exploring a dope concept - AI text gen in
@Framer
. Features include fully customizable writing tones, section types, mock data (reviews, names, etc) & much more. We're also ensuring its SEO-friendly. It's a total game-changer.
Join fassstt:
Improve
@Framer
loading speed!
I made a quick tutorial video that shows you how :)
Watch the video here to learn how to do it👉
Based on an article by
@LucaDaCorte
#framer
(1/5) 1 Minute
@Framer
lesson thread⭐:
How to use HTML tags correctly in
@Framer
to boost accessibility & SEO🚀
Framer automatically applies most HTML tags for you, so I'll only cover the tags it doesn't auto-apply to save you time.
See list below 👇
@Framer
just announced 3D Transforms
I made a video showcasing the feature & making dope effects with it.
Learn everything in 9 Minutes!
Packed with value as always.
Watch it here👉
Change text highlight color in
@Framer
- 20 second tutorial 👇
Open settings > General > Scroll down to 'custom code' > copy & paste the code below
<style>
::selection {
color:
#F00000
; /*selection text color*/
background:
#E6FF00
; /*selection background color*/
}
</style>
My first
@framer
template is out on early access!
"Freelancer One Pager" -
It would mean the world to me if you could check it out
You can get it for 70% off (5 bucks) with the code: EARLYONES70
Preview template:
New vid soon :)
Back at it with another
@framer
component!
(should I make this a daily thing atp?)
Today I made a working star rating component using the new
@framer
forms' radio selection 🌟
Feel free to incorporate it in your forms!
My
@Framer
TextClip component (Cuts text with '...' at the end) is ready!
I'm sending it For-Free to a select few before I release it. Comment "send" to get it early! (must follow so I can DM) ⌨️👇
Some may also know this effect as "ellipsis text truncate" Enjoy it :)
#Framer
Thanks to everyone who reached out. I'm going over every application.
I'll try to respond to every one! It might take a while since I got a lot of messages...
Cheers!
The new vid is out! Watch it here:
Auto-Generative (Dynamic) Table of Content Component in
@framer
It detects the titles on your page and automatically generates a responsive TOC that lets you jump to the different sections. Great for blogs & articles :)
The ULTIMATE dynamic table of contents in
@framer
What it does:
Automatically detects titles based on the page's text
highlights the current section that's being viewed
has smooth scroll
clips text
Video coming very soon! Stay tuned :)
(in collaboration with
@ClementLIONNE
)
👇
Alright here's the remix link:
⚠️This is a near replica of a real website I have no rights to. Please don't use it 1 for 1 in an actual site. It's purely made to showcase techniques & effects. Feel free to copy individual parts, but not the entire site.
@learnframer
@framer
Great video! super informative 🙌
P.S. I recommend this free plugin to remove the static background noise:
I use it for all of my videos. Works like magic.
And that's not all. We've got a few more ideas cooking that are still being refined, so follow me for future
@framer
plugin updates!
If you have suggestions for us / ideas for plugins - drop em below 👇
I am super excited for the future of
@framer
🚀
We're just getting started.
I want to get inspired! - Share the
@Framer
project you are most proud of in the replies👇
Let's all get inspired by each other & show love to this amazing community 🤩
(it doesn't have to be a full website - animations & cool components also count!)
#Framer
If you already have a design background, there are also tons of free Framer resources online to help you - My channel is a good start!
I also recommend
@learnframer
&
@timgabedesign
.
Their channels helped me personally get my start with
@Framer
over a year ago.
I organized all of the effects and components I showcased on my YouTube channel into a compact (free) library! Check it out here
Keep an eye on it 👀 it will keep growing as I upload more content!