How to ANIMATE your Web Designs in After Effects like a professional!

Поділитися
Вставка
  • Опубліковано 3 лис 2024

КОМЕНТАРІ • 49

  • @psychurch
    @psychurch Рік тому +7

    what i got out of this (not in any order)
    - Use easing curves to make it look natural
    - dont use too much easing
    - keep same curve profiles throughout the entire animation
    - use different timing for different elements
    - small elements with short distance need short animation times
    - show most important elements first to create visual hierarchy
    I probably missed some points, theres a lot of info packed into this little video, thank you!

    • @thematteovalentino
      @thematteovalentino  Рік тому

      You got everything right my man, thank you for pointing out what you’ve got out it because it’s super helpful for me to understand how to improve and for others to see what’s included! Thank you!✨🫶🏻

  • @playpiano2264
    @playpiano2264 11 місяців тому +2

    The camera shot, the ambiance and the overall viewing experience of the video was amazing 🔥

  • @fzkrm
    @fzkrm 10 місяців тому +1

    Always smashing it on the little details which sets you apart from everyone else 🐐 🔥

    • @thematteovalentino
      @thematteovalentino  10 місяців тому +1

      Thank you so much, I actually care a lot about tue details and I am happy that people see it!✨

  • @Heybuchi
    @Heybuchi Рік тому +1

    Happy to be among your first 1k subscribers..
    love to see more after effects UI animations.

    • @thematteovalentino
      @thematteovalentino  Рік тому

      I am glad to have you on the boat man✨ I am planning to make other videos about the topic, stay tuned!!

  • @АланЯнченко
    @АланЯнченко Рік тому +1

    Hi Matteo, thanks for the video, it’s the second video I add to my «watch before I start the animate» list. You make it clear, and use nice examples - so it’s a joy to watch. Also, nice method with the visualization of main sentences and resuming.

    • @thematteovalentino
      @thematteovalentino  Рік тому

      I’m honored to hear that, mate!👀 I’m also super happy to hear that you have found the video helpful and that it is understandable hahaha🙌🏻

  • @abdiissak1674
    @abdiissak1674 Рік тому +1

    Great content Matteo, you are super underrated bro, you gained a new subscriber!

    • @thematteovalentino
      @thematteovalentino  Рік тому +1

      I’m always happy to help all of you and I’m glad to hear that you like the content🫶🏻

  • @lorenapereira1193
    @lorenapereira1193 Рік тому +3

    Great Video! I'd love to see more of website animation in AE, I feel like there isn't really enough tutorials for website animations with AfterEffects. I love your work!

    • @thematteovalentino
      @thematteovalentino  Рік тому +1

      Thank you man, coming in the future! I think that there aren’t enough tutorials about the topic too, that’s why I would love to continue this series!🔥

    • @IsabelPereira-w8c
      @IsabelPereira-w8c 9 місяців тому +1

      @@thematteovalentinoI agree! And the content that I do find sucks. Yours is so solid, please make moreeeee

    • @thematteovalentino
      @thematteovalentino  9 місяців тому

      @@IsabelPereira-w8c thank you so much guys🫶🏻 Unfortunately the last period was full of projects but I am coming from next week!🤙🏻

  • @danielade-otoki4074
    @danielade-otoki4074 Рік тому +1

    Great video Matteo. I just started learning ui animation and it was helpful . I'd love to see more videos on this topic and you just gained a new subcriber. Thanks

    • @thematteovalentino
      @thematteovalentino  Рік тому

      Hey Daniel, I’m very happy that the video was helpful and welcome to the UI animation world hahah. Definitely more content about that in the next weeks✨

  • @storieinpixel
    @storieinpixel 9 місяців тому +1

    Very helpful! Thank you very much

  • @luckmattos
    @luckmattos 2 місяці тому +1

    Hi thanks for the video. Can you explain your workflow, how this come out of AE and goes to actuall website?

  • @angelicaswift215
    @angelicaswift215 6 місяців тому +1

    I really love the motion design of the AirPod website but just a quick question. Was the AirPod designed using blender? How can one create or outsource a digital product like that?

    • @thematteovalentino
      @thematteovalentino  6 місяців тому

      Nope but to outsource such task you can find creators on instagram, ask for the price of such work(which varies depending on the creative) and then you can implement it in your project. Another thing that you can do is find inline some 3D models of the object that you need and see if you can find something that fits your project’s art direction

  • @RealLucasJohn
    @RealLucasJohn 9 місяців тому +1

    Great video man!
    How do you implement the AI Format on to a website? If I have a Webflow or Framer website how would I upload the animation to those sites? Does it need to be converted to html or something?

    • @thematteovalentino
      @thematteovalentino  9 місяців тому

      I create the animations to show to tue developers how the website should look like in therms of motions and micro interactions. If you do everything by yourself, you can skip this phase of creating the animations and create them directly on your platform!

  • @KoarisDesign
    @KoarisDesign Рік тому +1

    Please you absolutely need to do more content about animating Webdesigns with After Effects....
    What are your thoughts on Principle? I used it for a few weeks, it's pretty intuitive but a bit buggy with some things....

    • @thematteovalentino
      @thematteovalentino  Рік тому

      Right now principle is not at a stage that for me can replace AE. The reality good thing, is that it’s a one time payment software so, if the software become extremely good, can be a really good alternative! By the way I’m going to make more content about this topic✨

  • @rumorscameras
    @rumorscameras 8 місяців тому +1

    hi, can you clarify, why do you do this animation, is it a website mockup then the web designer will copy what you did in code?

    • @thematteovalentino
      @thematteovalentino  8 місяців тому

      I’ll answer to this question in the upcoming video in one/two days✨

    • @rumorscameras
      @rumorscameras 8 місяців тому

      ok@@thematteovalentino

  • @dwojczuk1
    @dwojczuk1 Рік тому

    Just discovered your chanel. Great content!

  • @another.designer
    @another.designer Рік тому +1

    🙌🙌

  • @kaabfarooq6179
    @kaabfarooq6179 Рік тому

    Thanks for your valuable advice. Kindly also make on slider animations and common mistakes. Thanks a lot

    • @thematteovalentino
      @thematteovalentino  Рік тому +1

      Thank you a lot mate! Definitely something in my planner! Sliders are pretty tricky to make and can definitely ruin an entire landing page👀

  • @mahamudmunna5000
    @mahamudmunna5000 Рік тому +3

    how are you going to put that in webflow? that big lottie file and how its going to be functional ?

    • @thematteovalentino
      @thematteovalentino  Рік тому

      It’s not a lottie animation, it’s a video that I send to the developers to show them how I want the animations of the website

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu Рік тому

    I m ui designer , should I learn after effect and does it will help me to level up my ui skills and is these animations are possible in real??

    • @thematteovalentino
      @thematteovalentino  Рік тому +1

      The animations are 100% real, you can code them whenever you want! In my opinion you should learn the software, it might seems scary and overwhelming but it isn’t!✨

  • @FlowerQ155
    @FlowerQ155 Рік тому

    Awesome!

  • @AmjadKhan-rz6nu
    @AmjadKhan-rz6nu Рік тому

    I really love to create working ui but unfortunately I hate to code so will aftr effect can work for me as a good career and is it good career

    • @thematteovalentino
      @thematteovalentino  Рік тому +1

      It’s an awesome integration to your ui design service. It adds value to your offer and not a lot of people provide animations to the developers. In my career it’s adding a lot, I highly recommend you to implement After Effects in your workflow!!

    • @AmjadKhan-rz6nu
      @AmjadKhan-rz6nu Рік тому

      @@thematteovalentino wow man… your channel is my inspiration… this is mind blowing and trust me no one show tutorials like this.
      You are amazing

    • @thematteovalentino
      @thematteovalentino  Рік тому

      Your words mean a lot to me, thank you si much mate, much love and I wish you I can brung you some other valuable content in the future!

  • @kaabfarooq6179
    @kaabfarooq6179 Рік тому

    You are a Fighter, Wrestler... You dont give up easily... Used to do face reading some time ago