Vaibhav Khulbe
Together with Dylan, I built Fable's website in Framer. The previous version of the live website was built in Next.js and Tailwind CSS tech stack. We had to rebuild all of its pages in Framer.
⤷ Live Preview: https://www.fable.app/
Fable is a web-based motion design platform. With their intuitive UI and pro-grade tools, Fable empowers creators and teams to bring their motion workflows to the cloud. Their mission is to empower all creators with access and opportunity to tell stories with motion.
Chris Boardman, Co-Founder and CEO of Fable, approached us (me and Dylan) via our studio Moving Rectangles. He wanted to transition 1:1 from the current Next.js, Tailwind CSS and Sanity CMS stack to Framer in search of a simpler CMS which is easier to maintain. He wanted to transfer the whole website (125+ pages).
For this, we were given a Figma file which had all the assets, design specs, content etc. This helped us to go deep into the overall design choice, theme and layout of the website.
I completed the project in the following steps:
✧ Inspecting the live website: this is to know the types of pages, sections, anything custom we need to have beyond what Framer has to offer etc.
✧ Knowing the website UI design: this is where I check and duplicated the provided Figma file to get a feel of the visuals and design system used.
✧ Start creating components and sections: we wanted the webpages we build to be super flexible. So from the start, I made changes to existing components and built new ones (like navigation bar) with variants, variables, and some extra tricks.
✧ Working on specific pages: I worked on /create-features, /collaboration-features, /marketing-teams, /product-teams, /pricing, /security, blog detail pages like this and legal pages like Terms of Service.
✧ Working with Dylan on other pages: I needed extra pair of dev eyes, so Dylan helped a lot to create complex pages like /learn, /blog and learn detail pages like this.
✧ Making all pages responsive: this included creating different variants for specific components and changing the layout so everything is 100% responsive across desktop, tablet and mobile devices.
✧ Adding accessibility features, fixing bugs, using custom code and improving SEO performance: after major things were done and dusted, there were these final things left to do to make sure everything works and no stone is left unturned.
✧ Final checks and delivery: after a final review, we were ready to launch v1 of the website and deliver the project above and beyond before the delivery date.
Over time, I faced some big hurdles to create a specific feature or a specific page. Here are two of them:
✱ Creating a dynamic mobile navigation with code overrides: we wanted to have this slide-in-from-left animation on mobile devices when someone would tap on the hamburger menu:
At that time, Framer didn't had effects for components out so I decided to go on a code override route and wrote a custom Framer Motion override that achieves the same result:
// DrawerSlideIn.tsx import type { ComponentType } from "react" export function slideIn(Component): ComponentType { return (props) => { return ( <Component {...props} animate={{ x: [-500, 0, 0] }} transition={{ ease: "easeInOut", duration: 1 }} /> ) } }
✱ Creating the /learn page(s): The /learn, learn category, and learn detail CMS pages were some of the trickiest to make in Framer.
Due to Framer's advanced CMS features limitations, both Dylan and I worked on these pages, brainstormed for the best possible route so that it's easy for the Fable team to simply add content in CMS and everything works out of the box (without tinkering much) as expected.
Some of the technical difficulties we faced and overcame were:
I regulary shared some of new features we were working on on socials like Twitter/X:
Additionally, I also had an idea to write a 'breakdown' posts on Framer's official Circle community so others have an idea how we/I work to break down a specific technical challenge:
Feast your eyes! 😉
Wonderful to work with Vaibhav. They worked overtime to meet a tight deadline and were communicative throughout the project to get it over the line to a high standard. Looking forward to hopefully working together in the future.
— Chris Boardman, CEO, Fable.