When the items are within a scrollable container, that container needs a `layoutScroll` prop so that Framer Motion can correctly measure the scroll offset.
https://t.co/UydBzC5U3C
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:
https://t.co/97sQX6PMGu
https://t.co/300JQQ1nIC
… 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).
https://t.co/eCvGa9STe4
To make a horizontal list of items, you change the `axis` of the <https://t.co/Mr7AsStbvX> to "x".
But you also have to display them horizontally. The easiest way is to make the <https://t.co/DaTa4rgjFV> a flexbox.
https://t.co/bMrAaugt4J
🆕 in the @framer Book and the Mighty Motion Guide: The Reorder components
https://t.co/VDpz0veZYV
https://t.co/nntWczfU2D
Motion docs
https://t.co/9Vlw0yeVW3
The Reorder component can create an <ul> (unordered list, default) or an <ol> (ordered list).
https://t.co/ACIq5KUFGJ
I made a site that gathers 400+ Framer Motion & @framer examples.
https://t.co/LaGsjEaAEt
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.
@onuro Yeah, sometimes the website drops. Usually, the WordPress app warns me when this happens, but I was out of the house without the internet. (I just returned to Belgium, and apparently, I need a new sim card.)
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 🙃
https://t.co/b8p6JgQKGq
https://t.co/KYSwWaUN5f
"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
🔗 https://t.co/WHwDNvHOKl
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’.
https://t.co/XlyRajM6Gc
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.
https://t.co/uyYjzh7ner
@vennsoh@cptv8 That would not be easy because they’re on different websites (even when on the same domain). When I do that (after moving the Framer book to https://t.co/Nv87lHr2zc), it’ll have to be with some kind of ‘free access’ 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: https://t.co/Ou02SjDiyF
@vennsoh@cptv8 The Framer book will still get updates. In fact, some things I have to add (https://t.co/kPAul4o53q) will go to both (well, apart from that Reorder component).
@vennsoh@cptv8 Yeah, pretty much. The Framer book contains more (Framer-specific) stuff, and there’s more to explain because it’s a different public (designers).
@vennsoh@cptv8 It doesn’t deal with code overrides, how to make a component (no need to explain that to developers), property controls, or other Framer-specific things.
I wouldn’t get it if you have the Framer book because a lot of the content is similar (but then just applied to components).