Teaching @framer and Framer Motion at @mightyguides. Ah, and also https://teapawt.net/t.co/yVaEDQW6T2.… Nederlands, English, Español, Russkiy yazyk, Português
Currently in Belgium
Joined April 2008
- Tweets2.5K
- Following1.5K
- Followers822
- Likes2.1K
Tes Mat retweeted
🆕 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…
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.
Tes Mat retweeted
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
Tes Mat 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/
Tes Mat retweeted
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
Tes Mat retweeted
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
Tes Mat retweeted
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
Tes Mat retweeted
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…
Tes Mat retweeted
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
Tes Mat retweeted
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 🧵
Tes Mat retweeted
Joe in Amsterdam is publishing daily Framer examples in March. Six down, 25 more coming up!
Daily Framer Drops 1/31 🎁
Starting off simple with custom copy to clipboard buttons. Perfect for spam-free emails and discount codes.
(Tomorrow we'll add some Lottie effects and a toast confirmation 🍞)
Head to daily.framer.website to grab the component!
Walkthrough ⤵
Tes Mat retweeted
Now in the @framer book: Making an icon component that gets its SVG from an Airtable database. Add icons to your collection simply by uploading SVG files to Airtable.
Example: overlay-strap-754846.framer.…
There’s a ‘basic’ version that uses the existing colors of the SVG,…
Tes Mat retweeted
Zomaar een paar fragmenten van de afgelopen jaren; 📺👇
[1] ‘De Krim is geen betwist gebied, Rusland erkent de grenzen van Oekraïne’.
[2] ‘Waren dat Russische soldaten?’ ‘Het waren lokale groeperingen’.
[3] ‘Achter de lokale groeperingen op de Krim stonden onze soldaten’.
Tes Mat retweeted
When you use @framer Motion’s Animate Presence to animate one single element (by changing its `key`), two animations happen simultaneously, clearly visible when you slow it down.
With Animate Presence’s ‘wait’ mode, the second animation will happen after the first one.
Tes Mat retweeted
New section in the @framer book: 🔗 Motion Values
Everything about the values that drive all animations in Framer Motion and Framer.
A thread 🧵
Tes Mat retweeted
New in the @framer book: Everything about using other components, libraries, and design systems in code components you create.
framerbook.com/code-componen…
✨ Easy: Importing canvas components, Framer’s built-in components, other code components, or a JavaScript library like Lodash.
