Mighty Guides

Guides that teach you @framer and Framer Motion. Made by @cptv8.
Free content: and

[Mighty Guides @mightyguides]

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

[Mighty Guides @mightyguides]

To make only part of an item draggable, you can use the useDragControls() hook.

Motion docs:
https://t.co/lf2pSPwqpI

https://t.co/wB3weFUTms

[Mighty Guides @mightyguides]

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

[Mighty Guides @mightyguides]

… 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

[Mighty Guides @mightyguides]

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

[Mighty Guides @mightyguides]

🆕 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

[Tes Mat @cptv8]

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.

[Mighty Guides @mightyguides]

@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.)

[Mighty Guides @mightyguides]

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

[Vaibhav Khulbe @vaibhav_khulbe]

"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

[Mighty Guides @mightyguides]

… and we’re on @ProductHunt 🚀:
https://t.co/dsWNVTdPNV

#launchday

[Mighty Guides @mightyguides]

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

[Mighty Guides @mightyguides]

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

[Mighty Guides @mightyguides]

Check out a few of the 200+ SandBoxes that will be included.

https://t.co/PYZx0oKqYg

And follow this Twitter, sorry er… ✖️ for a discount code.

[Mighty Guides @mightyguides]

The Framer book is now part of 💪 Mighty Guides.

And 📅 Tuesday, there will be a new guide about Framer Motion at https://t.co/XlyRajM6Gc

[Mighty Guides @mightyguides]

@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.

[Mighty Guides @mightyguides]

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

[Mighty Guides @mightyguides]

@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).

[Mighty Guides @mightyguides]

@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).

[Mighty Guides @mightyguides]

@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).

[Mighty Guides @mightyguides]

@vennsoh @cptv8 Tuesday! https://t.co/b8p6JgQKGq