12 Principles to make your Webflow Animations look Pro

Поделиться
HTML-код
  • Опубликовано: 31 май 2024
  • Learn Webflow the FAST way with our full Webflow Masterclass course - bit.ly/47axYIP
    Play with Devins demo file: preview.webflow.com/preview/1...
    Follow Devin on Twitter: @devinsfountain
    How do the pros create award-winning animations that people love? What's the secret sauce missing from your interactions? In this video, I'm going to show you the 12 basic principles of animation you can use to instantly make your website stand out and let you charge more for your work.
    You can test these animations yourself on the read-only version of the project. bit.ly/43J8DTl
    📽️ CHAPTERS
    00:00 - Intro
    01:13 - Squash & Stretch
    07:10 - Anticipation
    12:00 - Staging
    15:22 - Straight Ahead & Pose-to-Pose
    19:13 - Follow Through & Overlapping Action
    24:49 - Slow in & Slow out
    27:06 - Arc
    31:06 - Secondary Action
    31:34 - Timing
    39:22 - Exaggeration
    45:44 - Solid Shapes
    49:36 - Appeal
    Let us know what you’d like to see next!
    📱 Find us on SOCIAL MEDIA
    Flux Academy's Instagram 👉 / flux.academy
    Flux Academy's Twitter 👉 / fluxacademyhq
    #webdesign #webflow #design

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

  • @thejoshloh
    @thejoshloh 10 месяцев назад +10

    Devin, this is an AMAZING video. Really great mini masterclass on animation, bro. Love it

  • @varunmohan2229
    @varunmohan2229 10 месяцев назад +2

    the most detailed video on animation principles i have seen till date thank you for sharing this !!

  • @htooaungglwinn
    @htooaungglwinn 8 месяцев назад

    The way Devin taught by setting up real world examples and breaking them down was amazing!

  • @NetzyNetzy-gj8dr
    @NetzyNetzy-gj8dr 23 дня назад

    This has increased my development by 50% thanks ❤

  • @kennybabalola3081
    @kennybabalola3081 10 месяцев назад

    This has been one of the best (if not the best) explainers I’ve seen , Thanks for this.

  • @badrthx8274
    @badrthx8274 3 месяца назад

    Flux Academy it's not just a learning, It's a treasure!! Thank you so much for every single effort 😍

  • @coreysmith9600
    @coreysmith9600 10 месяцев назад

    This is fantastic, thank you very much!

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

    Brilliant thanks for this tutorial! Well done!

  • @katoetonic
    @katoetonic 10 месяцев назад +4

    One of the best vids I've seen on the principles of Webflow animation. I wish Flux included more advanced animation in their Webflow Masterclass course.

    • @FluxAcademy
      @FluxAcademy  10 месяцев назад +4

      Coming up!

    • @katoetonic
      @katoetonic 10 месяцев назад +1

      @@FluxAcademy Amazing! I can't wait. :)

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

      @@FluxAcademy yes please, I want to focus on animations and 3d and 4d input

  • @Samtheraptor
    @Samtheraptor 10 месяцев назад

    This video is absolute gold! Thanks Flux👏🏼

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

    This is such a phenomenal tutorial. I don't work in design specifically but I've decided to build my own site in webflow for my product marketing consultancy. I'm going to experiment with a bunch of these!

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

    this is really good!!!

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

    Thank you guys! Your content helped me so much! :D

  • @drewkantos
    @drewkantos 10 месяцев назад

    Fantastic video

  • @lecurator
    @lecurator 3 месяца назад

    Great depth and great presentation 👏🏻

  • @user-tg6jg4yg2x
    @user-tg6jg4yg2x 10 месяцев назад

    Superb bro

  • @bonbabon1960
    @bonbabon1960 20 дней назад

    You are amazing 🎉

  • @Islamic_clips383
    @Islamic_clips383 10 месяцев назад

    Please more like this

  • @luannsete
    @luannsete 10 месяцев назад +3

    Flow Party gang

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

    its a great tutorial but i cant follow it on mobile because everything is barely visible because the screen width is large

  • @xtremdragon
    @xtremdragon 9 месяцев назад +2

    this video is not for beginners. As a beginner I did not understand how to go about implimenting this formats. Things have already been preset and I have no idea on how to arrive on those presets.

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

    i love the video really much, thanks Flux Academy for this valuable video on my playlist!

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

    Yeah. I havent really explored quickstack because I saw no real use for it.
    To be honest, I use flexbox MORE than grid even though I know grid is much more customizable.
    But as far as quickstack, why lock yourself into a box when you can just take the few extra steps and retain the control...?

  • @shivudesign9210
    @shivudesign9210 10 месяцев назад

    Please bring with framer one

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

    😁👏👏👏

  • @abdullahshykh9522
    @abdullahshykh9522 10 месяцев назад +1

    Hi

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

    those who wondering, its a lession from flux academy.

  • @memesctm
    @memesctm 8 месяцев назад

    Webflow dont wanna chosse "o,5 REM, 0,5 rem, 0.5 rem, 0.5 REM" somebody can?

    • @memesctm
      @memesctm 8 месяцев назад

      i can is 0.5rem xd

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

    visually this is good, everything you say is very relevent to web design thought process, aspect ratio feels weird tho and your cam spills off of it a weird amount.
    the way you talk is pretty whack, you say the same thing a lot, and dont say much when you talk if you know what i mean
    but good stuff