Using Framer X For React

Framer X offers tools to design scroll, link and page interactions. More info

Articles & Tutorials

Animating Next.js page transitions with Framer Motion (
Sep 17, 2019
I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.
  • Kristian Heruc
Going from Framer to Framer X (
Apr 07, 2019
A designers guide to React.
  • Max Steitle

Video Guides & Talks

Playing with Framer Motion (
Aug 26, 2019
Today we're going to play with Framer Motion to get a feel for how easy it is to get started with. Follow along!
  • Harry Wolff
Framer X Inside Out (
Jan 07, 2019
Framer X is an advanced interactive design tool, powered by React. In Framer X, you can use actual React components in your design, bringing Code and Design together in a completely new way. We’ll talk about the challenges we encountered while creating Framer X. From how to make a performant graphics editor to building a dynamic component loader.
  • Artem Riasnianskyi
Framer X First Look (
Aug 10, 2018
Live stream of checking out Framer X

Courses & Video Series

UI Interactions in Framer Playground (
Jun 11, 2019
Create powerful design and code components for your app and design system using Framer X. Learn how to design and animate an app from scratch and use React to create production-ready components.
  • Meng To
Framer UI Motion: Toggle (
May 08, 2019
Learn the ins and outs of the new Framer API!
  • Linton Ye
Framer X + React (
Sep 19, 2018
Get productive in Framer X. Learn React fundamentals. No coding experience required!
  • Linton Ye

Podcast Episodes

Framer X and Web Development of the Past with Thomas Aylott (
Mar 19, 2019
In this episode of React Round Up, Thomas Aylott, Founder at Things That Do Stuff, gives an overview of Framer X, explains what it is used for and how it can be beneficial for web designers.