Framer Motion (React) - The Basics

Sdílet
Vložit
  • čas přidán 14. 06. 2024
  • In this video we'll look at the basics of Framer Motion (React) by creating a few different animations.
    👨‍💻 Looking for a web developer job, visit: www.webdevjobs.io/
    👽 Discord - / discord
    ⏳ Timestamps
    00:00 - Introduction
    00:46 - Setup
    02:53 - Stagger Children
    06:13 - Fade Up / Down
    07:36 - Keyframes
    09:20 - Hover & Tap
    10:14 - Drag
    11:18 - Scroll Progression
    12:25 - SVG Animation
    14:09 - More Scrolling
    ✉️ Subscribe to Our Newsletter
    www.rithmic.studio/articles
    👋 Come say Hi
    X - / rithmio
    👽 Source Code
    GitHub - github.com/sixfwa/framer-moti...
    📜 Documentation
    TailwindCSS Vite - tailwindcss.com/docs/guides/vite
    Framer Motion - www.framer.com/motion/
    #FramerMotion #ReactJS #Animations

Komentáře • 32

  • @iamrithmic
    @iamrithmic  Před 4 měsíci

    👽 Join the Discord Server (link in the description)

  • @rizqyhbb
    @rizqyhbb Před 16 dny

    YESSS!!! best practice tutorial, this is what I need. Thanks

  • @collinsk8754
    @collinsk8754 Před měsícem

    A superb introduction to Framer Motion 🔥🔥

  • @yanngatignol9126
    @yanngatignol9126 Před 3 dny

    Hey, love your tuto !
    please more tutorial for framer motion, or course Im ready to buy

  • @godofwar8262
    @godofwar8262 Před 3 měsíci +4

    Bro you are the real dope in Framer motion

  • @iamrithmic
    @iamrithmic  Před 5 měsíci +1

    🚀 Transform your web dreams into reality with our expert design and development services! Learn more: www.rithmic.studio

  • @wulantsabita9843
    @wulantsabita9843 Před 27 dny

    that rectangle going off screen is sending me lmao

  • @pranitmane
    @pranitmane Před 3 měsíci +1

    much needed! thanks.

  • @anasselaoufi7620
    @anasselaoufi7620 Před 11 dny

    beautiful content

  • @Cengizism
    @Cengizism Před 5 měsíci +1

    Thanks! Good one!

  • @arshu0.720
    @arshu0.720 Před 5 měsíci +2

    Thanks

  • @sahilverma_dev
    @sahilverma_dev Před 5 měsíci +6

    can you post more framer content with advanced topics?

  • @ogs102
    @ogs102 Před 2 měsíci +1

    you are a different breed

  • @kiranm5419
    @kiranm5419 Před 3 měsíci

    Really awesome tutorial

  • @RelaxingMusic-lk4xj
    @RelaxingMusic-lk4xj Před 4 měsíci +1

    Thanks alot brother I want more intermediate and adavnce videos and projects with framer please

    • @iamrithmic
      @iamrithmic  Před 4 měsíci +2

      Yes more will be on the way!!

  • @lynx7077
    @lynx7077 Před 2 měsíci +1

    Great tutorial but it was a bit fast paced for my taste as a beginner. I had to pause and go back so many times 😅 Rather than that, i learned bunch of cool stuff, thank you!

  • @user-dp6vz9vw7c
    @user-dp6vz9vw7c Před 3 měsíci +1

    Appreciate it man

    • @iamrithmic
      @iamrithmic  Před 3 měsíci +1

      You are more than welcome dude!

  • @aiyn470
    @aiyn470 Před 3 měsíci

    1:50 what extensions did u use for add some tailwind class guide there

  • @DevanshuAugusty
    @DevanshuAugusty Před 3 měsíci +1

    thanx man

  • @md.saifurrahaman223
    @md.saifurrahaman223 Před měsícem

    What is your vs code theme name? Thanks.

  • @codedwebs
    @codedwebs Před 2 měsíci

    I am using same code but my stagger animation is not smooth like yours.

  • @jrmartinss
    @jrmartinss Před 3 měsíci +1

    so hard 😢

    • @iamrithmic
      @iamrithmic  Před 3 měsíci +1

      Stick at it my friend, you'll get there eventually. If you have questions feel free to join the Discord server, and hopefully we can answer