- 90
- 824 930
rithmic
United Kingdom
เข้าร่วมเมื่อ 12 เม.ย. 2021
I'm a freelance software engineer who likes to build cool stuff and educate others.
Wait....you can create 3D animations in CSS?
Let's have a look at creating 3D animations with CSS
⌛ Timestamps
00:00 - Introduction
01:49 - Animation 1
13:14 - Animation 2
🎬 Create Code Animations - snappify.com/?
Follow me on Twitter / X: rithmio
👨💻 Looking for a web developer job, visit: www.webdevjobs.io/
👽 Discord - discord.gg/TwUV34F6wC
👾 Complete Code - codepen.io/rithmio/pen/RwOvvJy
⌛ Timestamps
00:00 - Introduction
01:49 - Animation 1
13:14 - Animation 2
🎬 Create Code Animations - snappify.com/?
Follow me on Twitter / X: rithmio
👨💻 Looking for a web developer job, visit: www.webdevjobs.io/
👽 Discord - discord.gg/TwUV34F6wC
👾 Complete Code - codepen.io/rithmio/pen/RwOvvJy
มุมมอง: 1 588
วีดีโอ
Create the PERFECT Button (TailwindCSS / Framer Motion)
มุมมอง 38K7 หลายเดือนก่อน
Create the Perfect Button design and developed by Verse verse_ Follow me on Twitter / X: rithmio 👨💻 Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👾 Complete Code - github.com/sixfwa/shiny-button/tree/main 🛠️ Starter Code - github.com/sixfwa/shiny-button/tree/setup #reactjs #tailwindcss #css
A Cool Grid Effect for your Hero Section (Framer Motion)
มุมมอง 6K7 หลายเดือนก่อน
Create a simple yet fun hero section using Framer Motion and ReactJS Follow me on Twitter / X: rithmio 👨💻 Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👾 Complete Code - github.com/sixfwa/hero-section-framer 🛠️ Starter Code - github.com/sixfwa/hero-section-framer/tree/setup #reactjs #framermotion #TailwindCSS
Complex Animations Shouldn't be SO Hard | Framer Motion + useAnimate
มุมมอง 3.4K7 หลายเดือนก่อน
We will use the useAnimate hook from Framer Motion and create a complex animation. ⏳ Timestamps 00:00 - Introduction 00:32 - What we will build 01:44 - Setting up 04:34 - Animating 👨💻 Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👾 Code - github.com/sixfwa/subscribe-button #framermotion #reactjs #animations
You Need This Hover Effect on Your SVGs ASAP (ReactJS / TailwindCSS)
มุมมอง 69K8 หลายเดือนก่อน
Watch as I show you how you can add a hover gradient to your SVGs, as seen on the Supabase landing page Follow me on Twitter: rithmio ⏳ Timestamps 00:00 - What we will build 02:00 - Adding in content 05:38 - The Hover Gradient 👨💻 Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👾 Code - github.com/sixfwa/svg-gradient-hover #reactjs #webde...
Create a fun Text Input Animation using Framer Motion
มุมมอง 9K8 หลายเดือนก่อน
A fun but slightly impractical text input animation. Follow me on Twitter: rithmio 👨💻 Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👾 GitHub: github.com/sixfwa/cool-typing-animation
NextJS Page Animation Transitions with GSAP
มุมมอง 27K8 หลายเดือนก่อน
How to quickly get animation transitions working with NextJS and GSAP. Follow me on Twitter: rithmio 👨💻 Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👾 GitHub: github.com/sixfwa/nextjs-gsap-page-transitions
Add Clerk Authentication & Stripe Payments to your NextJS tRPC Application
มุมมอง 5K8 หลายเดือนก่อน
This is how you can add Clerk Authentication and Stripe payments into your T3 Application. Checkout Web Developer Jobs: www.webdevjobs.io/ ⏳ Chapters 00:00 - Introduction 00:55 - The Architecture 06:28 - Installations 07:28 - Clerk 15:15 - Clerk Webhooks 18:10 - Stripe 29:55 - Stripe Webhooks 👽 Discord - discord.gg/TwUV34F6wC 👾 Source Code - github.com/sixfwa/t3-stack-clerk-stripe 📐 Architectur...
Build a Side Navigation with TailwindCSS and Framer Motion
มุมมอง 18K9 หลายเดือนก่อน
Build a side navigation for your web application. Looking for a web developer job, visit: www.webdevjobs.io/ 👽 Discord - discord.gg/TwUV34F6wC 👋 Come say Hi X - rithmio 👽 Source Code GitHub - github.com/sixfwa/side-navigation-framer-motion 📜 Documentation Framer Motion: www.framer.com/motion/ TailwindCSS: tailwindcss.com/docs/guides/vite #reactjs #framermotion #tailwindcss
Create a Blog with NextJS - In 10 Minutes
มุมมอง 5K10 หลายเดือนก่อน
Create a Blog with NextJS - In 10 Minutes
Why you need an MVP (Minimum Viable Product)
มุมมอง 2.5K11 หลายเดือนก่อน
Why you need an MVP (Minimum Viable Product)
Create a Website Intro with ReactJS + GSAP in 10 Minutes
มุมมอง 36Kปีที่แล้ว
Create a Website Intro with ReactJS GSAP in 10 Minutes
T3 Stack AI Journal - 05 Deploying to Vercel
มุมมอง 687ปีที่แล้ว
T3 Stack AI Journal - 05 Deploying to Vercel
T3 Stack AI Journal - 04 Integrating the AI
มุมมอง 401ปีที่แล้ว
T3 Stack AI Journal - 04 Integrating the AI
T3 Stack AI Journal - 01 Setting up and Authentication
มุมมอง 2.1Kปีที่แล้ว
T3 Stack AI Journal - 01 Setting up and Authentication
Intermediate Python - Class and Static Methods
มุมมอง 5742 ปีที่แล้ว
Intermediate Python - Class and Static Methods
7 Python Tips and Tricks Everyone Should Know
มุมมอง 8142 ปีที่แล้ว
7 Python Tips and Tricks Everyone Should Know
Build a REST API in TypeScipt - ExpressJS and Prisma
มุมมอง 35K2 ปีที่แล้ว
Build a REST API in TypeScipt - ExpressJS and Prisma
Intermediate Python - Lambda Functions & Map, Filter, Reduce
มุมมอง 7692 ปีที่แล้ว
Intermediate Python - Lambda Functions & Map, Filter, Reduce
What happens when you copy/paste/cut a lot of content at once from this text area?
Can you suggest same video for react js or make it for react js
Thanks man, it's so useful!
This was really cool. Short but very informative.
... is that a complex animation? The gsap definition of complex is order of magnitudes more complex than this simple button
so much easier to do the same in framer where framer motion is writing itself why develop bs
Brilliant work and well presented.
how to add wordpress website?
In the meantime I am researching on better terminology to describe your good work! For now, you are a star! :)
i saw this button on crayo ai, it was you?
"overrides": { "leva": { "@radix-ui/react-portal": "1.0.2" } } add after depencies if you are facing error in vite react in color change icon
Can you make more videos on it. Please Make some 3D websites clones
decrease speed yaar
I have just recreated this with Vue, the code is slightly cleaner, because of VueUse helper functions (useElementSize, useMouseInElement). I could not make it look good with light mode, so I guess it will need to be a gimmick for dark themes only.
Bro , you deserve the subscribe button to be hit, ❤
Any places on the interwebs that go deep into animation and psychology? Animating and morphing svgs, the pyschology of different timing functions and how to think about them, cubics, superellipses, squircles, guiding principles for sequencing and animation, the personality of different effects like happy poppy effects or swift sliding effects, microanimations with lots of examples and galleries and rules of thumb and luminaries in the field? Even the underlyhing mathematics if possible? I want to go hardcore parkuor into the world of animations
Why you mentioned docker in the title? when you don't you use it in the video
Thank you!
Hey bro, did you forget your TH-cam password or something? 😄 Come back and teach us React + GSAP! We miss your content, and we're all about those good vibes. 🙌
i somewhat understood it from you but from tech with tim and bro code, i didnt rlly get it
@rithmic fyi the lib/article file isn't completely uploaded on github. The getCategorizedArticles and getArticleData are missing! Followed along with the video though to get it all. Thanks for the tutorial :)
I have a question, if I have a custom user manager and in my create_user method I need to include a date of birth, how do I divine that, like we defined email: str, first_name: str. How would I do that with dob: ??. Thanks.
Thank you, was very useful.
Thanks so much, I've surely gained a lot,, you missed on textures.
How come, when I try to apply this tutorial, the menu texts don’t disappear when I close the menu? Should I pass a prop to NavigationLink and add a condition on the name (if isOpen is true, display it; if not, hide it)?”
I already fixed it. Now it's working n hide
big +rep to you, this tutorial saved my project the night before deadline
Thank you so much bro keep doing
Banger video. Ty a lot <3
Thanks man!!! Underrated channel. Will share this with my friends.
Hello rithmic, thank you for creating your tutorial on React Fiber Three it was beneficial for me to see what it can do! Also, I'll be happy to say that you made me a believer again in trying to react, I was using vanilla Javascript to build all my applications, but from seeing how easy React allows you to create applications. I seriously can't see myself going back, I have a really cool and never built before application I plan to make with react so do you think I could get your twitter, so I can share it with you when it's finished?
A ridiculous task build blockchain with fastapi for what? To waste your time?
can you do this with vuejs also ? peeeeeeeeeeeaaaseee
Excellent tutorial but stop for at least half a second after writing a line of code because its impossible to pause it when you dont even allow the editor to finish autofilling it
Can we get this effect on a button too?
i had some issues when using staggerChild, why my animation only works perfectly when first page loaded, after i refresh the first div isnt animating and only start at third, idk what is wrong but maybe someone had the same issue let me know how to deal with it, im using react vite ts with tailwind
Great tutorial! I started dabbling into data science and found this video. I am more familiar with Django for the overall infrastructure, but now I am interested in FastAPI because it uses swagger for the API UI which helps see that data in JSON and organize it better. Better than writing it out. The speed is as advertised, which makes it ideal for data management. I am sure there are better ways to scrape the web with other frameworks, but so far the seems way better for so many reasons.
44:55 With the help of useState , finding out if mouse is hovered and then using if condition to change color on the basis of hover state. Instead of color, use that data for modifying rotation speed as in 47:58 or anything else❤
The simplest tutorial about framer out there ❤ Hope to see more from u
Which vscode theme are you using?
Great video, I'm into 3D React lately to make my portfolio more beautiful And this video helped me so much to understand the basic concept of R3F. Still a long way to create my 3D portfolio though, getting excited to watch the other videos.
Much Appreciated @iamrithmic...Thanks!
This video also helped me understand some concepts I never grasped in plain react such as props and hooks such as hover and clicked.
i love you bro this is so helpful. thank you so much
Parameters, ReturnType, Awaited
Which vs code theme are you using?
never use clerk lol
why?
Thank you so much for sharing this video! Could I ask for assistance with how to write the switch function in the webhooks/clerk.ts file in drizzle-speak rather than Prisma-speak? I've also posted on the discord channel. TIA.
Can we do animated shinny border? which only moves around the button or the card ?
Great tutorials mate. Thank you
Awesome... just awesome...