To make only part of an item draggable, you can use the useDragControls() hook.
Motion docs:
framer.com/motion/use-drag-c…
k7-reorder-with-use-drag-con…
When the items are within a scrollable container, that container needs a `layoutScroll` prop so that Framer Motion can correctly measure the scroll offset.
k8-reorder-in-a-scrollable-e…
… but often, you’ll probably not want bullets or numbers, so you can get rid of them by setting the CSS `list-style` to "none".
In this example, an item grows when you drag it and has a shadow (you’re picking it up).
k3-reorder-without-dots-or-n…
Adding items is easy: you use an `animate` animation with an `initial` state to start from, and for removing items, we use an Animate Presence `exit` animation.
Motion docs:
framer.com/motion/animate-pr…
k6-reorder-adding-and-removi…
To make a horizontal list of items, you change the `axis` of the <Reorder.group> to "x".
But you also have to display them horizontally. The easiest way is to make the <Reorder.Group> a flexbox.
k5-reorder-horizontal-exampl…
🆕 in the @framer Book and the Mighty Motion Guide: The Reorder components
motion.mighty.guide/reorder/
framerbook.com/animation/the…
Motion docs
framer.com/motion/reorder/?v…
The Reorder component can create an <ul> (unordered list, default) or an <ol> (ordered list).
k2-reorder-example-with-ol.v…
Mighty Guides retweeted
I made a site that gathers 400+ Framer Motion & @framer examples.
framermotionexamples.com/
It has all the examples from the Motion docs (68) plus many more made by @mattgperry (92).
You can search by Framer API for examples using Animate Presence, or useSpring, Reorder, etc.
Black Friday!
Here’s a 30% discount code that works for the Mighty Motion Guide and the Framer Book.
👉 FRIDAY 👈
Although it might say ‘Friday’, it’ll work until Monday 🙃
motion.mighty.guide
framerbook.com
Mighty Guides retweeted
"Where can I learn to create advanced websites and prototypes with @framer?"
The Framer Book by @cptv8 is your answer.
It's been around since 2019 and is a hidden gem 💎
⤷ Code overrides/components
⤷ Animations
⤷ Code-heavy examples/previews
🔗 framerbook.com/
You know what? It’s already August 8 in 🇧🇪 Belgium (where we’re based), so we’re 🚀 launching the new guide!
Get the Mighty Motion Guide now with a 20% discount using the code: ‘launch’.
motion.mighty.guide/
ALT Mighty Motion Guide logo
Fiodar Bardziuhou, a designer from Gdansk that I found on @Upwork, made the Mighty Guides and Mighty Motion Guide logos.
Well, I thought he was Polish, but he’s Belorussian and moved there a few years ago.
linktr.ee/fiodarbardworks
ALT Mighty Guides log versions
The Framer book is now part of 💪 Mighty Guides.
And 📅 Tuesday, there will be a new guide about Framer Motion at motion.mighty.guide/
ALT Overview of the Mighty Guides products
Check out a few of the 200+ SandBoxes that will be included.
vimeo.com/850255959
And follow this Twitter, sorry er… ✖️ for a discount code.
I’m about to launch a Framer Motion guide.
It’ll be on a new site, which will later also contain the Framer book. And I arrived at the most challenging part (well, for me): naming it, I have to pick a brand name.
Pick your favorite name here: tes7.typeform.com/to/fPn9z8X…
The stagger() function we use with useAnimate() has options that let you pick which item to start with, change the timing between animations with a curve, or add a delay.
Docs:
framer.com/motion/stagger/#o…
With ‘from’, you tell it with which item to start:
staggerfrom.vercel.app
There’s also ‘ease’, which lets you tweak the timing between the staggered animations by applying an easing curve.
It tweaks the delay between the animations, but the total running time (here, 3 seconds) will remain the same.
easingcurves.vercel.app
You pass the result of the stagger() function to animate()’s delay property… so what to do if you want the sequence to start after a delay? 🤔
For this, we have the ‘startDelay’ option.
startdelay.vercel.app
Matt @mattgperry at @framer created a new hook for manual animations: useAnimate(). It will replace useAnimationControls() because this one works with *any* HTML/SVG element.
An example: The box snaps back 2 seconds after you stop dragging.
codesandbox.io/s/tknjtw?file…
A thread 🧵
You can animate different sub-elements in the same sequence.
Granted, you might then get something like this (the animations alternate between the two items):
withoutat.vercel.app
But you can solve that with useAnimate()’s timing options.
timingwithat.vercel.app
There are four ways to change the timing:
• Same time as the previous animation
• Relative time
• Absolute time
• Referring to a label you defined
Docs
framer.com/motion/animate-fu…