Popmotion
@popmotionjs
Simple JavaScript animation libraries for delightful interfaces. Created by @mattgperry.
You might like
The Appear Effects optimisation has arrived in @framer! It brings huge SEO and user benefits with Lighthouse scores way up and perceived loading times way down. Framer Motion spring animations *before* React has hydrated the page. Well how does that work then?
🖤 We just shipped an incredible @framer update that brings completely reimagined Appear Effects, making them up to 12x faster. Amazing work from @_shuangq and @mattgperry. Learn more: framer.com/updates/appear…
🚀 Introducing hardware-accelerated animations in @Framer Motion! The new hybrid engine mixes the power of JS animations with the performance of native. Starting with "opacity", it will automatically run animations on the GPU when possible. Learn more: framer.com/docs/animation…
WIP, I'm recreating the @Apple iPod Pro landing page in @framer. It's unfinished and it has a ton of layout bugs, but it's getting there and it's such a rewarding exercise. I have 2 sections (Hero + Value Props) and 7 more to go. ipod-pro.framer.website
👩🏼🔬 Ever wanted to mix AnimatePresence with @remix_run's React Router? Check out our new official example: codesandbox.io/s/framer-motio…
🚀 Pop pop! Framer Motion 7.2 introduces the "popLayout" mode to AnimatePresence. In this mode, exiting elements will be popped from the page layout, allowing surrounding elements to animate into place immediately. Sandbox: codesandbox.io/s/framer-motio… Docs: framer.com/docs/animate-p…
Perforated <div />, etched frosted <footer /> and I don't even know what the third one is. Some digital materials from recent sandboxes, using a mixture of backdrop-filter, background and mask-image.
I got nerdsniped on our @framer Discord and now here's an example of dynamically adjusting ticker speed based on scroll velocity. A true useScroll x useSpring x useVelocity x useTransform x useAnimationFrame collab: codesandbox.io/s/framer-motio…
Top JavaScript Animation Libraries ⚡ A thread 🧵👇🏻
👩🚀 Ever wanted to transform an element without transforming its child? It's possible! Once per frame, calculate the inverse of each transform (100px becomes -100px etc) and apply to the child in reverse order. Here's how to do it with Framer Motion: codesandbox.io/s/framer-motio…
New to @framer Motion? I'm refreshing our examples over the following weeks, starting from the absolute basics through to more advanced examples. And I'll be posting them all in this thread! #001: Enter animation codesandbox.io/s/framer-motio…
Five years ago I wrote a guide called "Create the Perfect Carousel". In retrospect it was anything but! With the new Carousel and Ticker components for @framer, there's at least one thing that actually is perfect: The creative process! Just drag, drop, and link.
💖 I’m very excited to share two brand new @framer components with you: Carousel and Ticker. Both are now available from within the Insert Panel and unlock entirely new interactions. Made with @mattgperry. Check out the video below to learn how they work. framer.com/updates/carous…
⭕️ I've just made a new background-image + backdrop-filter effect. Get the CSS here: codesandbox.io/s/framer-motio…
#005 Spring transitions Animate values with realistic spring physics simply by setting type="spring". Demo: codesandbox.io/s/framer-motio… Docs: framer.com/docs/transitio…
🚀 Framer Motion 6.5 introduces useScroll - the easiest way to create amazing scroll-linked animations in React! framer.com/docs/use-scrol… Check out this thread for details and live demos 👇
Currently doing a pass on the Framer Motion docs, surfacing some things that are currently buried within bigger pages and adding more explanation/examples. For instance, there's useAnimationFrame, super low-level frame loop: framer.com/docs/use-anima…
🚀 Framer Motion 6.4 introduces useInView! This 0.6kb fat-free utility hook simply returns true when an element is within the viewport. No <motion.div /> necessary, here it is triggering CSS transitions: codesandbox.io/s/cool-breeze-… Docs: framer.com/docs/use-in-vi…
💡 When animating an SVG path with stroke-linecap set to "round", have you ever noticed that even if the path length is set to 0, you can see still this annoying circle? 1/2
👨🔧 Just released an interesting bug fix for mixing rotation and layout animations in Framer Motion. In this video, the grey container is animating height via scale, which distorts its children. We usually correct for this, but these rotating children are still stretching.
🫡 I’ve created a new starter template you can use for your next personal website and blog in @framer. Fast, reliable and highly customizable. Remix link can be found on the home page. Try the demo here: blog.framer.wiki
United States Trends
- 1. #UFC321 111K posts
- 2. Gane 125K posts
- 3. Aspinall 112K posts
- 4. Jon Jones 10.3K posts
- 5. Ryan Williams N/A
- 6. Liverpool 168K posts
- 7. Mizzou 4,803 posts
- 8. South Carolina 11.1K posts
- 9. Ty Simpson 1,480 posts
- 10. Mateer 5,894 posts
- 11. Matt Zollers N/A
- 12. Aaron Henry N/A
- 13. Iowa 16K posts
- 14. Kirby Moore N/A
- 15. June Lockhart 4,679 posts
- 16. Slot 110K posts
- 17. Pribula 1,149 posts
- 18. Arch 18K posts
- 19. Sark 4,265 posts
- 20. Brentford 70.9K posts
You might like
-
Matt Perry
@mattgperry -
Jared Palmer
@jaredpalmer -
Tim
@timneutkens -
David K 🎹
@DavidKPiano -
Sindre Sorhus
@sindresorhus -
fks
@FredKSchott -
not just pixels
@getifyX -
Devon Govett
@devongovett -
Jason Miller 🦊⚛
@_developit -
kitze
@thekitze -
Lee Byron
@leeb -
henry
@left_pad -
Ives van Hoorne
@CompuIves -
Steve Ruiz
@steveruizok -
Satyajit Sahoo
@satya164
Something went wrong.
Something went wrong.