Making a Realistic Folding Animation With Framer Motion

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

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

  • @frontendfyi
    @frontendfyi  7 месяцев назад +5

    Sorry if you got two notifications about this video! The first one had some weird artifacts and audio glitches. So I had to pull it and reupload it ❤ This one is perfect! Hope you enjoy it!

    • @DheerajSharma-hw6qm
      @DheerajSharma-hw6qm 7 месяцев назад

      Hey Jeroen hope you doing well..i was wondering if you could share which font you use in vscode its super cool and would love to experience it..i find you video's very knowledgable and really appreciate the hard work .

  • @AvanaVana
    @AvanaVana Месяц назад

    I just have to say, there are some very useful tidbits of information interspersed throughout this video. For one, I just dealt with the bug of motion overriding tailwind transforms in a completely unrelated animation project I was working on, and I remembered this video and that you were able to fix it by moving the TW class to an inline style.

    • @frontendfyi
      @frontendfyi  Месяц назад

      Thank you so much for sharing this with me! It makes me really happy to hear these things 😁
      Honestly i think my main goal is to teach people all these small and useful tricks. Not per se to build the thing we’re building. Since by learning all these small tricks, you eventually become a better frontend developer, and can build way more cool stuff!
      So thanks again!

  • @MrBumbo90
    @MrBumbo90 7 месяцев назад +1

    Beautiful. Your channel is really a hidden gem.
    I really need to get into framer motion. I've used GSAP quite a bit but framer motion just seems more intuitive.

    • @frontendfyi
      @frontendfyi  7 месяцев назад +1

      Thanks for your kind words, really appreciate it ❤️

  • @pulpml
    @pulpml 7 месяцев назад

    Wow! Thank you for making this

  • @МихаилАндросюк-ш7ц
    @МихаилАндросюк-ш7ц 7 месяцев назад

    Super nice 🤩

  • @samu0120
    @samu0120 Месяц назад

    how do I add the code with styles.css to my framer page? And how do I change the pictures inside it?

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

    Found randomly on twitter, beautiful 🙌

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

      That’s what I like to hear! 🔥 Welcome friend!

  • @МихаилАндросюк-ш7ц
    @МихаилАндросюк-ш7ц 7 месяцев назад

    Super nice 🤩

  • @kevinat71
    @kevinat71 7 месяцев назад

    amazing!

  • @ROL4ND-CSS
    @ROL4ND-CSS 6 месяцев назад

    If you are in a grid parent there is no need for position relative to use the z-index ;)

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

      Ooooh! You’re right! It’s such an old habit to automatically grab for position relative, haha. Thanks for telling me!

  • @danaharley3565
    @danaharley3565 7 месяцев назад

    Speechless 😂

  • @strudvik
    @strudvik 17 дней назад

    What font is used in your code editor?

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

    Hi I’m interested in your pro course, but when I buy it is it from your company or is it from you personally? 😄

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

      Thanks for wanting to buy the course 🙏
      Frontend.fyi is my company, so pretty much both is the answer, haha. You do get a company invoice if that is what you're asking! Sent through Stripe.
      Let me know if I misunderstood your question!

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

      @@frontendfyi perfect, no it was that. I will buy it today! Love your RUclips!

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

      Thank you so much, really appreciate it! Just shoot me a message in case you'd like anything changed with the invoice! jeroen [at] frontend.fyi, or via Discord which you get access to as a pro member.

  • @anonymous........
    @anonymous........ 9 дней назад

    13:59 😂

  • @kamill34
    @kamill34 7 месяцев назад

    damn so positive energy :)

    • @frontendfyi
      @frontendfyi  7 месяцев назад

      Haha thank you! Hope that means you liked the energy and it isn’t too much ;)

    • @kamill34
      @kamill34 7 месяцев назад

      @@frontendfyi of course! The moment with the skewwww was super funny :).

  • @Madflows
    @Madflows 6 месяцев назад +1

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

    That stupid tree 😢

    • @frontendfyi
      @frontendfyi  5 месяцев назад +1

      I should’ve said “stupid emoji” 😉 Trees are great ❤️

  • @v.demchenko
    @v.demchenko 7 месяцев назад

    🎉🎉

  • @guillermo.avalos
    @guillermo.avalos 7 месяцев назад

    Great code, but the fold is completely unrealistic. A Triptych wouldn’t unfold like this.

    • @frontendfyi
      @frontendfyi  7 месяцев назад +2

      I don't look at it as a Triptych though, I'd more see this as a 'Z' that folds in and out. I think it makes more sense then right?
      In either case I hope you still learned something!

  • @81NARY
    @81NARY 7 месяцев назад

    Never knew about _dragX, really cool vid!