Trending

#framermotion

Latest posts tagged with #framermotion on Bluesky

Latest Top
Trending

Posts tagged #framermotion

Video

"The best designs are invisible." β€” Edward Tufte

Good things comes at cost, aren't they?
Made the initial sketch of settings panel with #React, #NextJS, and #FramerMotion.

#Devlog #BuildInPublic #Frontend

6 1 0 0
Video

"Developers spend 10 hours for things that never get noticed."

That's way too true. I don't think many would notice this animation but still. I spend a hour perfecting the animation.

Built it with #React, #NextJS, and #FramerMotion.

#WebDev #BuildInPublic #Frontend

6 0 1 0
Video

Experimenting with Framer Motion for the first time to add some personality to my portfolio page :)

#UI #FramerMotion

1 0 0 0
Post image Post image

Today I got my course builder application done with a beautiful app design using #cursorai #cursor #react #reactnative #typescript #tailwindcss and #FramerMotion #Framer.

Using Markdown I can build courses that directly integrate via Typescript into my platform!

#appdesign #design #technology

2 0 0 0
Video

In learning I created this fun little thing. Felt like sharing. Code for the curious: github.com/TravisBumgar...

#animation #framermotion #css #javascript #react #color #colorful

0 0 0 0
Video

Build modern, animated tab interfaces in Next.js with this component.

* Smooth Framer Motion animations
* Responsive design
* Easy integration via Shadcn/UI
* Modern tech stack

πŸ”— next.jqueryscript.net/shadcn-ui/an...

#NextJS #TailwindCSS #WebDev #UIComponents #FramerMotion

2 0 0 0
Video

Supa smoooth text effect made in Motion for React ✨

#motion #framermotion #reactjs #frontend

0 0 1 0

7/10 Pro-Value perspective: React & Framer Motion make the library a perfect fit for some. Others are skeptical of the ethics & value. βš–οΈ #reactjs #framermotion #uikit

0 0 1 0
Video

I liked @discord.com's Quest animation, so I recreated it using #framermotion and #react.

#webdev #webdesign #uidesign #animation #animations

0 1 1 0
Video

DarkViolet.ai and learnwithlumi.com are about more than just streamlining education with AI. We are also making education engaging and thereby more NATURAL! Here's an example! #math #STEM #animation #framermotion #education #teaching #algebra

0 0 0 0
Preview
Animate UI Fully animated, open-source component distribution built with React, TypeScript, Tailwind CSS, Motion and Shadcn CLI. Browse a list of components you can install, modify, and use in your projects.

Animate UI is a collection of animated components built with React, TypeScript, Tailwind, and Motion. Could be useful if you want some motion in your UI without building everything from scratch. Read more about it here: animate-ui.com

#ReactJS #TailwindCSS #FramerMotion #WebDev #DevTools

3 0 0 0
Preview
Introducing Motion for Vue - Motion Blog Motion finally arrives on Vue, complete with variants, scroll, layout animations, and everything else you love from Framer Motion.

After 5 years as a ticket, Motion now available for Vue. It brings expressive animations to Vue apps with the same API from Framer Motion. Here's the update: motion.dev/blog/introdu...

#VueJS #FramerMotion #WebDev #Animations #Frontend #DevTools

0 1 0 0
Preview
Reveal On-Scroll Animation for React with Framer Motion Have you ever seen a reveal animation on a website and thought, β€œWow, that’s so cool!” Then, you wanted to learn how to do it, and you…

πŸš€ Want to add smooth reveal-on-scroll animations to your React project?

I just wrote a guide on using Framer Motion to create awesome animations effortlessly! ✨

Check it out here πŸ‘‡
achinthaisuru444.medium.com/reveal-on-sc...

Let me know what you think! πŸ’¬

#React #FramerMotion #WebDev #UIDesign

1 0 0 0
Preview
Motion - A modern animation library for JavaScript and React Motion is built on native browser APIs for a tiny filesize and superfast performance. It uses hardware acceleration for smooth and eco-friendly animations. Previously Framer Motion.

Animations are underrated in web design. A well placed micro-interaction can make or break UX. Tools like Framer Motion can really help in adding smooth animations without much fuss. Check it out: motion.dev

#WebDesign #UX #UI #FramerMotion #CSSAnimations #DevTools

0 0 0 1
Video

Thoughts on this animation for my revamped landing page? Too much? Too fast? Too slow? Too cool? Nauseating? Soothing? Confusing? Inspiring?

Built with @nextjs.org, @typescriptlang.org, @tailwindcss.com, and @framer.com

#nextjs #typescript #framermotion #tailwind #webdev #design #animation

2 0 1 1
Preview
Create 3D Web Animations with THREE.js Create interactive 3D web animations using React Three Fiber and Framer Motion. Build an animated 3D pizza with detailed guidance and creativity tips

Just dropped a new blog post! πŸ• We're diving deep into animating a 3D pizza using THREE.js (React Three Fiber) & Framer Motion. Let's get cheesy!

blog.devmansam.net/making-your-...

#100Devs #react #reactthreefiber #framermotion #3danimation #javascript #coding #tech #webdev #techblog #blog

11 2 2 0
Preview
Create Custom CSS Text Effects with Gradients and Image Fills Learn how to transform typography using CSS gradients and images. Tutorial includes 6 stunning text effects: rainbow, metallic gold, image-filled, neon, hol

In my next blog post, I'll share a beginner-friendly introduction to Framer Motion, a powerful animation library for React. πŸ’‘
Stay tuned for more! πŸ€“
In the meantime, check out my recent blog post. πŸ˜ŽπŸ€™πŸΌ

blog.devmansam.net/how-to-fill-...

#react #framermotion #javascript #100Devs #webdev #coding

15 0 1 0
Video

A little sick but wanted to get my fingers on some keys. Played around with the motion.dev library. Rotating along the z axis seems to be glitchy on firefox but worked well on safari and chrome (desktop). I may blog about it or keyframes. We'll see. #100Devs #framermotion #react #mern #webdev

15 0 2 0
Personal Website Image

Personal Website Image

Hey Everyone! Spent some time the past couple of days building a personal website. Took a little back and forth of how I wanted it to look and settled one a simple yet information design.

www.benmacleod.me

#personalwebsite #nextjs #tailwindcss #framermotion #portfolio

3 0 0 0
Video

I added some more framer-motion effects to my navbar and hero section, cleaned up some of the spacing and margins, and added some hover effects. I think it looks pretty decent on mobile too. Sorry for the low quality & sped up screen recording.

#100Devs #framermotion #react #javascript #webdev

9 0 3 0
Video

Just launched a sleek landing page for a client using @nextjs.org 15, @framer.com , Prismic and @tailwindcss.com πŸš€
Check it out: pb.lk

#WebDevelopment #Nextjs #FramerMotion #TailwindCSS

2 0 0 0
Video

New Component: Select Model

starui.link/docs/compone...

#motion #webdev #framermotion

2 0 0 0

🎨 Chrome Extension enables visual animation creation with live preview, preset saving, and export to #TailwindCSS, #CSS, or #FramerMotion

πŸ’» Supports various animation examples: landing pages, chat dialogs, dynamic islands, color swatches

1 0 1 0
Video

I decided to add a tech stack section, that I animated using framer motion, as well as another parallax section to my portfolio page. I've been having fun playing with the values.

#100Devs #framermotion #react #javascript #WebDevelopment #webdev #SoftwareEngineering #coding

19 0 6 0
Video

I added another parallax scene for my contact me page, and added framer motion animations on my Hello World about me page. #100Devs #webdevelopment #react #javascript #framermotion

14 1 4 0
Video

πŸš€ Detail Zoom in action! πŸŽ₯

Seamlessly morph elements and create zoom effects with React + Framer Motion. πŸ’‘

πŸ‘‰ Try it now: quickanimation.dev

#react #webdev #animation #framermotion #webanimation #uiux

0 0 0 0
Preview
Motion-Primitives UI kit to make beautiful, animated interfaces, faster. Open-source and customizable.

😍 Just discoverd motion-primitives.com by @ibelick.bsky.social

The #ShadCN of #Animation πŸ₯°

#ReactJS #FramerMotion #Motion

4 1 0 0
Video

πŸŽ‰ I just launched! πŸš€
QuickAnimation.dev to help people create smooth animations on the web.

Start animating now πŸ‘‰ quickanimation.dev

#react #webdev #animation #framermotion #indiehacking #tailwindcss

6 2 0 0
Video

After adding #framermotion to (using #react19/#next15) on Safari only you can scroll past the footer of the page.
Does anyone have a similar experience and solution?

#buildinpublic

2 0 1 0
Video

πŸ—½ How to Code a Shader Based Reveal Effect with React Three Fiber & GLSL
By Colin Demouge @colindmg.bsky.social at @codrops.bsky.social
Image reveal effect created with React-Three-Fiber/Drei and animated using Framer Motion.
#R3F #FramerMotion #webdev

tympanus.net/codrops/2024...

1 0 0 0