rithmic
rithmic
  • 90
  • 824 930
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
มุมมอง: 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
Framer Motion (React) - The Basics
มุมมอง 38K10 หลายเดือนก่อน
Framer Motion (React) - The Basics
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 - 03 tRPC (Backend)
มุมมอง 394ปีที่แล้ว
T3 Stack AI Journal - 03 tRPC (Backend)
T3 Stack AI Journal - 02 Layout
มุมมอง 501ปีที่แล้ว
T3 Stack AI Journal - 02 Layout
T3 Stack AI Journal - 01 Setting up and Authentication
มุมมอง 2.1Kปีที่แล้ว
T3 Stack AI Journal - 01 Setting up and Authentication
React Three Fiber (R3F) - The Basics
มุมมอง 82Kปีที่แล้ว
React Three Fiber (R3F) - The Basics
React Hooks - useEffect
มุมมอง 432ปีที่แล้ว
React Hooks - useEffect
React Hooks - useState
มุมมอง 486ปีที่แล้ว
React Hooks - useState
Pydantic Crash Course
มุมมอง 10K2 ปีที่แล้ว
Pydantic Crash Course
Pytest - Test your Python code
มุมมอง 1.8K2 ปีที่แล้ว
Pytest - Test your Python code
Beginners FastAPI - 40 min
มุมมอง 3.2K2 ปีที่แล้ว
Beginners FastAPI - 40 min
Intermediate Python - Class and Static Methods
มุมมอง 5742 ปีที่แล้ว
Intermediate Python - Class and Static Methods
5 Python Beginner Projects
มุมมอง 4282 ปีที่แล้ว
5 Python Beginner Projects
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 - Dataclasses
มุมมอง 9582 ปีที่แล้ว
Intermediate Python - Dataclasses
Intermediate Python - Lambda Functions & Map, Filter, Reduce
มุมมอง 7692 ปีที่แล้ว
Intermediate Python - Lambda Functions & Map, Filter, Reduce

ความคิดเห็น

  • @AvanaVana
    @AvanaVana 6 ชั่วโมงที่ผ่านมา

    What happens when you copy/paste/cut a lot of content at once from this text area?

  • @JasdeepSingh338-ew3rk
    @JasdeepSingh338-ew3rk 3 วันที่ผ่านมา

    Can you suggest same video for react js or make it for react js

  • @Cheremisincouk
    @Cheremisincouk 7 วันที่ผ่านมา

    Thanks man, it's so useful!

  • @TheRonron1994
    @TheRonron1994 7 วันที่ผ่านมา

    This was really cool. Short but very informative.

  • @_justnick
    @_justnick 9 วันที่ผ่านมา

    ... is that a complex animation? The gsap definition of complex is order of magnitudes more complex than this simple button

  • @rumorscameras
    @rumorscameras 16 วันที่ผ่านมา

    so much easier to do the same in framer where framer motion is writing itself why develop bs

  • @philc787
    @philc787 21 วันที่ผ่านมา

    Brilliant work and well presented.

  • @emreyagan3368
    @emreyagan3368 21 วันที่ผ่านมา

    how to add wordpress website?

  • @nhlanhlamoyo2162
    @nhlanhlamoyo2162 27 วันที่ผ่านมา

    In the meantime I am researching on better terminology to describe your good work! For now, you are a star! :)

  • @samy.filmmaker
    @samy.filmmaker หลายเดือนก่อน

    i saw this button on crayo ai, it was you?

  • @mujeeb353
    @mujeeb353 หลายเดือนก่อน

    "overrides": { "leva": { "@radix-ui/react-portal": "1.0.2" } } add after depencies if you are facing error in vite react in color change icon

  • @mujeeb353
    @mujeeb353 หลายเดือนก่อน

    Can you make more videos on it. Please Make some 3D websites clones

  • @VINAYKUMARELLULLA
    @VINAYKUMARELLULLA หลายเดือนก่อน

    decrease speed yaar

  • @pauljohnsonbringbackdislik1469
    @pauljohnsonbringbackdislik1469 หลายเดือนก่อน

    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.

  • @amralimohamed6497
    @amralimohamed6497 หลายเดือนก่อน

    Bro , you deserve the subscribe button to be hit, ❤

  • @SogMosee
    @SogMosee หลายเดือนก่อน

    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

  • @abdullahshahzad4408
    @abdullahshahzad4408 หลายเดือนก่อน

    Why you mentioned docker in the title? when you don't you use it in the video

  • @jojotonnaer1526
    @jojotonnaer1526 หลายเดือนก่อน

    Thank you!

  • @PriyanshuKumar-kt4ec
    @PriyanshuKumar-kt4ec หลายเดือนก่อน

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

  • @Limitix1
    @Limitix1 หลายเดือนก่อน

    i somewhat understood it from you but from tech with tim and bro code, i didnt rlly get it

  • @NicoleBerreth
    @NicoleBerreth หลายเดือนก่อน

    @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 :)

  • @Glitchanim
    @Glitchanim หลายเดือนก่อน

    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.

  • @anasmunir92
    @anasmunir92 หลายเดือนก่อน

    Thank you, was very useful.

  • @tech_xeniex
    @tech_xeniex หลายเดือนก่อน

    Thanks so much, I've surely gained a lot,, you missed on textures.

  • @AndreaBernardini_WhiteSun
    @AndreaBernardini_WhiteSun หลายเดือนก่อน

    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)?”

    • @eazyproducer
      @eazyproducer 29 วันที่ผ่านมา

      I already fixed it. Now it's working n hide

  • @laeioun
    @laeioun 2 หลายเดือนก่อน

    big +rep to you, this tutorial saved my project the night before deadline

  • @Mansoorahmedofficial_777
    @Mansoorahmedofficial_777 2 หลายเดือนก่อน

    Thank you so much bro keep doing

  • @danielgonzalez5503
    @danielgonzalez5503 2 หลายเดือนก่อน

    Banger video. Ty a lot <3

  • @UECSoumyaRay
    @UECSoumyaRay 2 หลายเดือนก่อน

    Thanks man!!! Underrated channel. Will share this with my friends.

  • @kidbrave_7673
    @kidbrave_7673 2 หลายเดือนก่อน

    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?

  • @rkm88216
    @rkm88216 2 หลายเดือนก่อน

    A ridiculous task build blockchain with fastapi for what? To waste your time?

  • @gabriel99999-r
    @gabriel99999-r 2 หลายเดือนก่อน

    can you do this with vuejs also ? peeeeeeeeeeeaaaseee

  • @urmom0x
    @urmom0x 2 หลายเดือนก่อน

    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

  • @achirasilva2567
    @achirasilva2567 2 หลายเดือนก่อน

    Can we get this effect on a button too?

  • @ruuma1074
    @ruuma1074 2 หลายเดือนก่อน

    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

  • @robsdigitalcreations9958
    @robsdigitalcreations9958 2 หลายเดือนก่อน

    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.

  • @8BitGamerYT1
    @8BitGamerYT1 2 หลายเดือนก่อน

    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❤

  • @capK29
    @capK29 2 หลายเดือนก่อน

    The simplest tutorial about framer out there ❤ Hope to see more from u

  • @SubhasishDas-r5o
    @SubhasishDas-r5o 2 หลายเดือนก่อน

    Which vscode theme are you using?

  • @kentnathaniel6961
    @kentnathaniel6961 2 หลายเดือนก่อน

    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.

  • @faustozambrano4901
    @faustozambrano4901 3 หลายเดือนก่อน

    Much Appreciated @iamrithmic...Thanks!

  • @leroydickens3705
    @leroydickens3705 3 หลายเดือนก่อน

    This video also helped me understand some concepts I never grasped in plain react such as props and hooks such as hover and clicked.

  • @ahmadmunab0
    @ahmadmunab0 3 หลายเดือนก่อน

    i love you bro this is so helpful. thank you so much

  • @cristianmargineanu1458
    @cristianmargineanu1458 3 หลายเดือนก่อน

    Parameters, ReturnType, Awaited

  • @adityarajawat3185
    @adityarajawat3185 3 หลายเดือนก่อน

    Which vs code theme are you using?

  • @tabdig
    @tabdig 3 หลายเดือนก่อน

    never use clerk lol

  • @AngelaCui-fn2tn
    @AngelaCui-fn2tn 3 หลายเดือนก่อน

    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.

  • @ShahryarAsif
    @ShahryarAsif 3 หลายเดือนก่อน

    Can we do animated shinny border? which only moves around the button or the card ?

  • @AmantisAnalytics
    @AmantisAnalytics 3 หลายเดือนก่อน

    Great tutorials mate. Thank you

  • @talhakhan3010
    @talhakhan3010 3 หลายเดือนก่อน

    Awesome... just awesome...