Framer Motion Recipes Update #4: Animating a Fixed Header and Build UI Pro
Hi there! You're receiving this email because you signed up to get updates about our upcoming Framer Motion course. If you'd rather not get them please feel free to unsubscribe – we only want to share this with folks who are still interested!
Hey, Sam here with another update on my Framer Motion Recipes course!
I've published two more lessons over on Build UI teaching you how to add scroll-based animation to a fixed header.
In Part 1, you'll learn how to grow and shrink the header's height as the page scrolls. It covers:
- Framer Motion's `useScroll` hook
- Composing values with `useTransform`
- Deriving the change in scroll direction
- Using custom MotionValues
If you've never built scroll-based animations before, this is a perfect place to start. And Part 1 will be free all weekend – so grab it while it's hot!
→ Watch "Animating a Fixed header: Part 1" on Build UI
In Part 2, we add a fading nav and blurred background effect to our header by extracting a custom Hook. The code we end up with is a beautiful demonstration of the composability of React Hooks.
It covers:
- How to spot a `boundedScroll` abstraction
- Writing a custom Hook
- Chaining transforms of MotionValues
- Blurring the background with `useMotionTemplate`
- Delaying the header's animation
→ Watch "Animating a Fixed header: Part 2" on Build UI
You can watch Part 2 by becoming a member of Build UI, which brings me to...
Build UI Pro
I'm happy to announce that we've launched Build UI Pro subscriptions!
You can join today for $29/month and get access to all four lessons of Framer Motion Recipes, as well as every new premium video as soon as we publish it.
Each video comes with a full-text summary including code snippets, a link to the before and after on GitHub, and a working demo on Code Sandbox.
You'll also get access to the Private Build UI Discord, where you can chat directly with me about anything you watch on Build UI or my YouTube channel, and also interact with other Build UI Pro members.
Some folks already found us during our soft launch and got the conversation going!
I couldn't be more excited for what we have planned for Build UI. If you want to get in early on the site, have a direct influence on what videos I make next, and support my work, join today:
I can't wait to meet you inside!
Next week I'll be in San Francisco for Next.js Conf where my talk "Nested Layouts by example" will be shown. It's all about the new router coing to Next.js 13! I'm really looking forward to this release, and expect to see some Next.js content on Build UI in the near future.
As always, thanks for taking an interest in my work – and talk to you soon.
– Sam
Build UI
Subscribe to stay updated on all the latest content from Build UI.
Hey there!We've been experimenting with some new AI components, and we thought you'd have fun seeing what we've been up to! This week, we've got two new videos showing off some of the React techniques we're using to handle streaming text from large language models—plus a code recipe for animating that text to make it look buttery smooth. Animate streaming text with a one-line hook Watch now → Distinguishing between human and programmatic scrolling Watch now → Recipe: useAnimatedText View now...
Hey! It's been a while since we've sent an update, but it was great meeting so many of you during conference season this spring. We're excited to be gearing up for our next course! More on that below... but first, here's what we've been up to: How to build a Recursive React Component Watch now → React Unpacked: A Roadmap to React 19 Watch now → SPAs in React 19 Watch now → Throw is about control flow – not error handling Watch now → We're super excited to share that we've started work on our...
Learn all about Search Params with React Server Components in our latest blog post, and check out our most recent podcast episode for our thoughts on React 19's upcoming features. Instant Search Params with React Server Components Read now → Out-of-order streaming in React Watch now → Asset loading in React Watch now → Podcast - Blog Post Club: React Labs – What We’ve Been Working On Watch now → Podcast - Instant URL search params in Next.js Watch now → Podcast - React Deep Dive:...