Tes Mat

Teaching @framer and Framer Motion at @mightyguides.
Ah, and also English, Español, Russkiy yazyk, Português

[Tes Mat @cptv8]

@GrahamPaterson Thanks for spotting! I switched it off.

[Tes Mat @cptv8]

@rwieruch Hey Robin, what happened to https://t.co/6wteABFNiu? The API no longer contains data. Could you tell me where you got the data so that I can try to figure it out myself?

[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]

@ssaakkaaa @framer @mattgperry Vercel was the easiest way to deploy (with the old CodeSandbox), but a box couldn’t contain TypeScript, and it worked better when you used the latest versions of Framer Motion, React, and react-scripts.

You can DM me here with the list of deployments and CodeSandboxes.

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

[Tes Mat @cptv8]

@ssaakkaaa @framer @mattgperry Wherever you can deploy it. I prefer to include deployed examples because the embedded version of a CodeSandbox is so heavy.
Maybe it works with CodeSandbox newer ‘devboxes’, but I haven’t yet figured out how.

[Tes Mat @cptv8]

@ssaakkaaa @framer @mattgperry Just 1 request: Could you deploy the ones you want to see added?

I deployed most with Vercel, but since CodeSandbox’s update, I can’t connect to it anymore.

The only option I have now is to push a Sandbox to GitHub and have Vercel get it from there. Which takes a lot more time.

[Tes Mat @cptv8]

@katedonnellann Here’s one more:

https://t.co/qP1IrnCZQ3

[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

[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

[Tes Mat @cptv8]

@vennsoh Okay, I’m writing a Reorder chapter, and I found something: Items jumping around is something recent; it appeared a few versions ago.
https://t.co/IavWBG0yM4
When you update an existing CodeSandbox to the latest version of Framer Motion, you’ll see the same thing happening.

[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

[Tes Mat @cptv8]

@thereal_apk @vaibhav_khulbe @framer 🙏🙏🙏

[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]

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

[Tes Mat @cptv8]

@vennsoh Yeah, that seems a bit buggy (items jump around). To be honest: I haven’t tried the Reorder components yet, but they might be ‘Framer Motion only’.

[Tes Mat @cptv8]

@PetrusTheron @framer Not yet. It’s one of the feature requests (by users): https://t.co/Ewqd9swSfN

But yeah, you could use Airtable or another online database that has an API. But remember that whatever you get through an API will not be on the page instantly because the request has to be made.

[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]

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:
https://t.co/5tkBaj0BrY

With ‘from’, you tell it with which item to start:
https://t.co/iLJe1a3tsg