Animated tabs - with inverted text!

Поделиться
HTML-код
  • Опубликовано: 8 фев 2025

Комментарии • 90

  • @codyjxmes
    @codyjxmes Год назад +41

    Sam, these tutorials have been so vaulable to me and my work and I can't thank you enough for sharing with us! Keep it up man, the Front-end Dev side of RUclips needs people like you❤

  • @christopherkapic
    @christopherkapic Год назад +16

    This is insanely simple for how clean the animation is. Great video Sam!

  • @gregsayshi
    @gregsayshi Год назад +6

    Always look forward to your videos. Your Design sense, teaching style and spirit of generosity in sharing is unparalleled, a rare blend and inspiration. A big thanks to you Sam!

  • @satish-pokala
    @satish-pokala 10 месяцев назад

    🤯It's an insanely simple explanation for such a complex animation. I love the way you covered every minute detail. Thank you so much!!

  • @abjexperts
    @abjexperts Год назад +11

    Please make more cool scroll animations using framer-motion, really love your work man👍

  • @aviza12
    @aviza12 4 месяца назад

    Thanks for this amazing series!
    I've read framer motion's docs through, and didn't realize how powerful it actually is, until I started watching your videos!

  • @blackpurple9163
    @blackpurple9163 Год назад +1

    This was very informative and you also fixed the few glitches that occurred, kudos to you and framer motion and tailwind team to make this so beautiful

  • @edhahaz
    @edhahaz Год назад

    Your attention to detail is second to none

  • @rakib17874
    @rakib17874 Год назад +1

    Really, your handling with subtle visual cues is stunning. Awesome Sam

  • @valtism
    @valtism Год назад +5

    Wow. I've heard a lot about framer motion but this really sold it for me. I thought for sure you would have to pull the pill out of the map to animate it. Really nice how they handle the scale / radius ratio for you.

  • @zlatkoiliev8927
    @zlatkoiliev8927 Год назад +1

    Sam, I love your videos! So happy I found your channel! You really take FE development to a next level! Keep it up!

  • @bryceblankinship
    @bryceblankinship Год назад

    This was probably the best ad framer motion could ever get

  • @emirhanwsd
    @emirhanwsd Год назад

    i can always find the better ways of the complex designs or animations what i tried on your channel, and this is absolutely perfect. thanks Sam.

  • @voldemortvi4264
    @voldemortvi4264 Год назад

    this tutorial is simple and good to the point , i'll save this video to watch it later for sure

  • @borsaniasushant1
    @borsaniasushant1 Год назад

    This is the tutorial that motivated me to learn framer motion..

  • @mr.truzzell
    @mr.truzzell Год назад

    really awesome work! love how you go into details and perfection!

  • @vedovelli
    @vedovelli Год назад

    This is what I call a valuable content!

  • @christopherkapic
    @christopherkapic Год назад

    Sam, great tutorial. I am going to include this in my site's navbar. Thank you!

  • @shakapaker
    @shakapaker Год назад

    Amazing, always looking for something like that and here is video from one of my favorite author

  • @tech3425
    @tech3425 Год назад

    Always learn something new from your content

  • @iamfaizanarif
    @iamfaizanarif Год назад

    You’re awesome Sam! Great content as always.

  • @MrChickenpoulet
    @MrChickenpoulet Год назад

    lol wtf! just a `layoutId` prop and you can have such a cool animation, not only of the position but also the width!
    great to know!

  • @coder-twadd
    @coder-twadd Год назад

    You're the goat for this tutorial

  • @kingdavid2446
    @kingdavid2446 Год назад

    Awesome one Sam 👍. Waiting for the calendar animation

  • @dennyrachmadi1391
    @dennyrachmadi1391 Год назад

    thanks Sam. very clear explanation and nice tips as always

  • @Sound-hub
    @Sound-hub 7 месяцев назад

    It just how should I say, Simple, Subtle and great

  • @jordancalhouncom
    @jordancalhouncom Год назад

    +1 for vim. Gorgeous transition!

  • @namev0id
    @namev0id Год назад

    You're an awesome tutor, explained so well !🙌🙌

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd 6 месяцев назад

    THank you so much sam, very helpful content

  • @bradtramel9467
    @bradtramel9467 Год назад

    incredible per usual

  • @philstainer
    @philstainer Год назад

    This is awesome, thanks Sam!

  • @javierperezmarin6039
    @javierperezmarin6039 Год назад

    Sam you are awesome, keep this good work!!

  • @incacube
    @incacube Год назад

    realy good explaning! i will start using framer motion thanks to you!

  • @rjtdas
    @rjtdas Год назад +1

    Thank you 🔥

  • @ghouston2712
    @ghouston2712 Год назад

    That is wild

  • @LeandroVilanovaDev
    @LeandroVilanovaDev Год назад

    Excellent video! Thanks.

  • @FacePlat3
    @FacePlat3 Год назад

    You just gave me a reason to tryout framer motion thanks!

  • @AlanMontgomery
    @AlanMontgomery Год назад

    Amazing again Sam!

  • @UNDEREFFCT
    @UNDEREFFCT 6 месяцев назад

    You are a f***** goat ! u saved me hours maybe even days trying to make this

  • @SogMosee
    @SogMosee Год назад

    thats why youre the boss man

  • @alexg7282
    @alexg7282 Год назад

    Really cool and smooth ! Thank you

  • @MichalŠevčík-b5l
    @MichalŠevčík-b5l Год назад

    Love your content Sam.

  • @FGA-47
    @FGA-47 Год назад

    Insane tutorial, thanks ❤❤❤

  • @brahimboulhend4248
    @brahimboulhend4248 Год назад

    Ammazing demo !!

  • @kb_bohara
    @kb_bohara Год назад

    Framer is awesome

  • @manishpanchal1098
    @manishpanchal1098 Год назад

    super work

  • @ivanvolti
    @ivanvolti Год назад

    Great tutorial, as always🔥

  • @lih4553
    @lih4553 Год назад

    Jesus I love these videos keep it up ❤

  • @wassup102
    @wassup102 Год назад

    learnt a lot, thank you

  • @andreyh6934
    @andreyh6934 5 месяцев назад

    Спасибо за идею! Очень классно получилось!

  • @raymondmichael4987
    @raymondmichael4987 Год назад

    Instantly watched it 😂😂😂,
    Thanks buddy

  • @ericsonl_
    @ericsonl_ Год назад

    Awesome tutorials hoping for the PPP for your Build UI Courses

  • @tejaswavhal2626
    @tejaswavhal2626 Год назад

    Amazing

  • @george_davituri
    @george_davituri Год назад

    framer motion is powerful

  • @jonathanvandenberg3571
    @jonathanvandenberg3571 Год назад

    Awesome!

  • @אילוןמעיין
    @אילוןמעיין 6 месяцев назад

    thank you :)

  • @shafu_xyz
    @shafu_xyz Год назад

    really cool lesson 👌

  • @merictunc
    @merictunc Год назад

    Basic solution to a complex problem 🎉

  • @joshuagalit6936
    @joshuagalit6936 Год назад

    This is what I've been looking for HAHHAHAH

  • @prasanthmoolethodi3152
    @prasanthmoolethodi3152 Год назад

    You are Awesome

  • @sebosamuraj
    @sebosamuraj Год назад

    Love it❤

  • @kumarvishalben
    @kumarvishalben Год назад

    Awesome🎉

  • @robhulltech
    @robhulltech Год назад

    I watched this based on Adam Wathan's recommendation and was pleasantly surprised by the quality from a small RUclips channel. My concern is that the title and thumbnail aren't click-worthy enough for me to have watched this without a human recommendation.

  • @kevinbatdorf
    @kevinbatdorf Год назад

    I wonder how this would go combined with the iOS treatment from the last video. So that when you are hovering to the right of the pill, it grows right a few pixels to show the intent.

  • @FzsHotDogInDonut
    @FzsHotDogInDonut Год назад

    WTFFFFFFFFFFFFFFFFFFFF. I am flabbergasted

  • @hodev632
    @hodev632 Год назад

    you are good teacher , can you teach how to make ripple effect with framer motion and react . like material ui ripple which is reliable

  • @atolz1352
    @atolz1352 Год назад

    This feels like magic. Could u pls explain how the layout id actually work under the hood?
    Removing the pill from one child to another child in the dom.
    Is it actually removed from the dom?

  • @brayancuenca6925
    @brayancuenca6925 Год назад

    More content please 😢

  • @imsotoxd
    @imsotoxd 2 дня назад

    Does anyone have a problem when the document scrolls? The active pill jumps from the bottom.

  • @maxwebstudio
    @maxwebstudio Год назад

    That's awesome !
    Plus the timing is perfect, i just integrated Framer motion to a project.
    One issue : The mix-blender isn't working sometimes, but can't figure out why... Anyone has a clue ?
    Thanks a lot !

  • @andreaverrecchia3907
    @andreaverrecchia3907 Год назад

    please, an example with colors.🙏

    • @samselikoff
      @samselikoff  Год назад +1

      Working on it!

    • @StephenRayner
      @StephenRayner Год назад

      @@samselikoff Really want this actively figuring it out now. Buzz kill that it doesn't work with colour. Should be in the title, black and white only

  • @xaero1986
    @xaero1986 Год назад

    This only works on a static page, if you add it as a navigation between pages it will bug with the animation.

    • @josephito27
      @josephito27 9 месяцев назад

      that's why it's called tabs, not navbar

  • @undefined_null
    @undefined_null Год назад

    Awesome video.
    Can you share your vim config for vs code?
    I've just started to use the vim extension, and would like some inspiration.
    Btw which vim extension are you using?
    Thanks in advance..

    • @samselikoff
      @samselikoff  Год назад

      I use this one and all defaults! marketplace.visualstudio.com/items?itemName=vscodevim.vim

    • @undefined_null
      @undefined_null Год назад

      @@samselikoff Okayy, thanks 👍

  • @kajoo6420
    @kajoo6420 Год назад

    This is a fantastic way to create animated tabs. However, when the background of the entire screen is white and the button and text are black, the text is not visible. I've tried a lot with other ways, but haven't found a way yet. It would be great if the color could be changed more freely

    • @samselikoff
      @samselikoff  Год назад

      I haven’t tried this yet but you may be able to use this technique twitter.com/pacocoursey/status/1522641710639194114?s=46&t=k4XEISmV-XBZYtw2JeE4ow

  • @kaas99
    @kaas99 Год назад

    🤯🤯

  • @ThanHtutZaw3
    @ThanHtutZaw3 Год назад

    @Sam Selikoff how can I transform center to specific tab item by clicking it with framer ? I have also drag tab( with framer) . And I also tried with scroll-IntoView and it doesn't well with framer drag .

  • @estebanfelipe3980
    @estebanfelipe3980 2 месяца назад

    Does anyone know why he uses 'let' instead of 'const' for setting variables?

  • @mayankchouhan458
    @mayankchouhan458 11 месяцев назад

    guy's a legend and its coming from an indian so he is a legend......

  • @joepetrillo6185
    @joepetrillo6185 Год назад

    How do I use my own colors still?

  • @nirajdeshmukh7514
    @nirajdeshmukh7514 Год назад

    forget about code but Sam is looking handsome 😍😍🤩 I guess a lot of girls must have crush on him.

  • @WanderingBall
    @WanderingBall Год назад

    build with content tabs

  • @bobdpa
    @bobdpa Год назад

    Awesome!