Jitter. A SUPER FAST UI/UX Animation Tool!

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ก.ค. 2024
  • bit.ly/4945zow 👈 Design & code like me. Use "UI2024" for 25% Off!
    -- Today, I'm going to show you a tool I came across yesterday that makes creating animations extremely simple. This tool was built with UI/UX animation in mind. It's web-based, it's fast, and it's easy.
    jitter.video
    This is not a sponsored video.
    Figma project file referenced in video:
    www.figma.com/community/file/...
    0:00 - Intro
    0:50 - Figma Design
    1:28 - Exporting from Figma
    2:30 - Animating in Jitter
    8:50 - Final Animation
    - - - - - - - - - - - - - - - - - - - - - -
    Subscribe for NEW VIDEOS!
    Learn UI/UX: designcourse.com
    My personal FB account: logodesigner
    Coursetro FB: coursetro
    Coursetro's Twitter: / designcoursecom
    Join my Discord! / discord
    ^-Chat with me and others
    - - - - - - - - - - - - - - - - - - - - - -
    Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
    Now, I focus all of my time and energy on this channel and my website Designcourse.com.
    Come to my discord server or add me on social media and say Hi!
  • แนวปฏิบัติและการใช้ชีวิต

ความคิดเห็น • 82

  • @spazgrafficz6113
    @spazgrafficz6113 4 หลายเดือนก่อน +7

    My life is officially complete. Great content Gary and very insightful. I've only dreamt of finding a plugin like this to take my designs to higher levels.

  • @Exiide89
    @Exiide89 4 หลายเดือนก่อน +31

    Tools are great when they can be translated into actual UI in programming.

  • @adelakunoluwatobi8930
    @adelakunoluwatobi8930 4 หลายเดือนก่อน +2

    I have been following up on jitter. It's nice to have you create something with it. Great tutorial as always

  • @djdesigns81
    @djdesigns81 หลายเดือนก่อน

    Man this was awesome. Great video!!

  • @unl0ck998
    @unl0ck998 4 หลายเดือนก่อน

    Thanks for the recommendation!

  • @musthavechannel5262
    @musthavechannel5262 4 หลายเดือนก่อน +6

    Brrrro, the studio man. Looks awesome.

    • @omnirhythm
      @omnirhythm 4 หลายเดือนก่อน

      Must be fake, real IT people program their drums. ba-dum.jssss :D

  • @DesignCourse
    @DesignCourse  4 หลายเดือนก่อน +8

    Super excited for this tool. I've been waiting for something like this for years! After Effects is just too slow to really "move fast", if you know what I mean.

    • @techtipsuk
      @techtipsuk 4 หลายเดือนก่อน

      After Effects is a completely different tool. Sure you can animate text but AE is for special effects and high end motion graphics not simple web animations. This is more comparable to what was Flash.

    • @sujayshetty4858
      @sujayshetty4858 4 หลายเดือนก่อน

      recent video on rive platform????

  • @animavilis4077
    @animavilis4077 4 หลายเดือนก่อน

    That’s so cool honestly! Can’t wait to use it.

  • @achrafgr5449
    @achrafgr5449 4 หลายเดือนก่อน

    Great value in this tool and your illustration

  • @woollywoolwoolz
    @woollywoolwoolz 4 หลายเดือนก่อน

    This changes the game❤

  • @MeezanTheFairBloke
    @MeezanTheFairBloke 3 หลายเดือนก่อน

    That was like magic!

  • @ninanordbo
    @ninanordbo 4 หลายเดือนก่อน

    yeah jitter is fab. love it

  • @sepehrui
    @sepehrui 4 หลายเดือนก่อน

    Thank you so much!

  • @ihajo
    @ihajo 3 หลายเดือนก่อน

    Great video as always, I will try it with Webflow and see how good the lottie is🤓

  • @mostafaazzouz591
    @mostafaazzouz591 2 หลายเดือนก่อน

    Waow very beautiful ❤❤❤❤❤

  • @minotuki100
    @minotuki100 4 หลายเดือนก่อน

    Macromedia Flash is back 😍 (without actionscript and maybe no interpolation yet). Looks nice btw

  • @michalkrajcovic3374
    @michalkrajcovic3374 4 หลายเดือนก่อน

    Nice ... I will try this one on web. Hope it won't be to much of perf problem. That would ruin smooth experience very quickly

  • @readywhen
    @readywhen 4 หลายเดือนก่อน +2

    Heyyy this is exactly what I was looking for to quickly and easily animate Figma files before developing the css/js animations!

  • @flammytv_
    @flammytv_ 4 หลายเดือนก่อน

    Wow, this is fantastic. How can one take the animation to Figma

  • @myunexpectedlists
    @myunexpectedlists 4 หลายเดือนก่อน

    Yes 👍

  • @Defini3
    @Defini3 4 หลายเดือนก่อน

    Omg! I need this 🙌

  • @jofodomingo5035
    @jofodomingo5035 4 หลายเดือนก่อน

    This tool is amazing, thanks for sharing!

    • @voodooaudio9488
      @voodooaudio9488 4 หลายเดือนก่อน

      tool is shit. learn to code

  • @mysardor
    @mysardor 4 หลายเดือนก่อน

    super tool, thanks for the video!!!

  • @polystormstudio
    @polystormstudio 4 หลายเดือนก่อน

    I was hoping for SVG animations

  • @TiffanyNg100
    @TiffanyNg100 4 หลายเดือนก่อน

    What happen with Rive?

  • @jazzymichael
    @jazzymichael 3 หลายเดือนก่อน +2

    Can these animations be exported as HTML/CSS/JS ?

  • @QuantumSingularityOne
    @QuantumSingularityOne 4 หลายเดือนก่อน +3

    Great tutorial! Would be great to have another tutorial about how to implement this animation on a real project maybe using framer. Thanks for sharing!

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน +2

      The only way you can implement anything on the web (through Framer or otherwise) made on Jitter, is via GIF (terrible), MP4 (could work well, depending on the use case) and Lottie (the best option to use, depending on the animation).

  • @Trazynn
    @Trazynn 4 หลายเดือนก่อน +2

    Rive is great for animating Midjourney stuff into Framer. Especially when you use Squoosh to compress the hell out of the images to webp. I got large image animations crushed into sub 150kb files and you wouldn't know it save for the insane loading speed.

  • @ManuAntony-ne8te
    @ManuAntony-ne8te 4 หลายเดือนก่อน +4

    can you do a video on lottie files new motion design tool

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน +3

      Oooo, will check out. Thanks!

  • @choongching
    @choongching 2 หลายเดือนก่อน

    can this be exported as Lottie files?

  • @ishanjalan
    @ishanjalan 4 หลายเดือนก่อน

    Would you say this is better than Lottie? Apologies if you mentioned it in the video.

  • @spridgejuice
    @spridgejuice 3 หลายเดือนก่อน

    no relation with Jitter, the nodal video manipulation tool from Cycling '74 which works in Max? Strange naming if not...

  • @joxmanyou
    @joxmanyou 4 หลายเดือนก่อน

    Hi. Does this replace your “Advanced Frontends” course?

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน +2

      Not at all! This is a vastly different thing. ;)

  • @itsthesa
    @itsthesa 4 หลายเดือนก่อน

    I loved jitter but it had quite alot of problem, sometimes importing from figma, many design changes, like any blury components.

    • @mclandeg1
      @mclandeg1 3 หลายเดือนก่อน

      it's trash tbh

    • @itsthesa
      @itsthesa 3 หลายเดือนก่อน

      @@mclandeg1 Kind of trash but works. I would prefer if their was more functions

  • @Defini3
    @Defini3 4 หลายเดือนก่อน

    I literally had this problem where I need to export the animation I made in figma in a video format during a code fest in my school (idk what im doing at that time 😂) Still going to use this one for sure to use in website designs. Thanks for this again my guy!

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน

      Yup, you can embed either a lottie file, mp4 file or a gif file, as those are the file formats it can export atm.

    • @Defini3
      @Defini3 4 หลายเดือนก่อน

      @@DesignCourse can you do short videos like 100 seconds of things? Those will be a big help for beginners in UI/UX designer like me

    • @ParallelXL
      @ParallelXL 4 หลายเดือนก่อน

      Exporting in lottie is free?@@DesignCourse

    • @voodooaudio9488
      @voodooaudio9488 4 หลายเดือนก่อน

      learn css animation and svg, not this torrential crap he pushes because he's paid to do so@@Defini3

  • @techtipsuk
    @techtipsuk 4 หลายเดือนก่อน +1

    How is this in anyway comparable to After Effects? Come on.

  • @PianoFAB95
    @PianoFAB95 4 หลายเดือนก่อน

    Naaaa I'm gonna go for Rive app you reveal 2 years ago 😉

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน +1

      Rive is great, but is a lot more complex.

    • @PianoFAB95
      @PianoFAB95 4 หลายเดือนก่อน

      @@DesignCourse Yeah I reckon 🙂

  • @swojnowski453
    @swojnowski453 4 หลายเดือนก่อน +1

    The best way is no effects. The way it was 25 years ago. Information should be the primary focus and the effect ;)

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน +4

      Borrrring! Animations/microinteractions integrated in an appropriate way can really add to the UX.

    • @NickBrown79
      @NickBrown79 4 หลายเดือนก่อน

      the best way is a 12 pt courier text file with no formatting, spaces, returns, or colors....just running on forever.. Like it used to be. ...and get off my lawn.

    • @cryMoreLoL
      @cryMoreLoL 4 หลายเดือนก่อน +3

      I'm not a fan of awwwards type websites where everything if over animated, constant scroll hijacking and text size so big you have to step back 50 feet to read it. However, animations have their place when done correctly.

  • @datapadnl
    @datapadnl 4 หลายเดือนก่อน +1

    We're moving back to Adobe Flash aren't we, hahaha

    • @DesignCourse
      @DesignCourse  4 หลายเดือนก่อน

      I hope. Loved flash!

  • @ArminmoTV
    @ArminmoTV 4 หลายเดือนก่อน

    new?

  • @tethron.
    @tethron. 4 หลายเดือนก่อน

    Love that. Do you think it's still worth it for a web dev to fully learn premier and video editing?

  • @EnzReviews
    @EnzReviews 3 หลายเดือนก่อน +1

    Saying this is way better than after effects is kinda bold dont u think. Its like saying mc donalds is better than an actual Restaurant

    • @mclandeg1
      @mclandeg1 3 หลายเดือนก่อน

      clickbait

  • @r-i-ch
    @r-i-ch 4 หลายเดือนก่อน

    How can I get these sort of motion graphic effects when loading a web page?
    This is a neat tool and all, and a pretty slick UI, but the output is video files, not web pages. You could put a video as a background, but yaknow what I mean - I want a tool like this that will let me animate actual DOM elements. Does such a thing exist?

  • @rucker1584
    @rucker1584 4 หลายเดือนก่อน +2

    i'm not sure i see the point. Animations are ubiquitous across most platforms for aesthetic purposes. Most use-case masking on Figma are a/to do with scrolling and avoiding the run on b/to show the client, and allowing them to adapt it according to need. I'll stick to the usual 5 minute job of drawing an oblong in Figma.

  • @iresolvers
    @iresolvers 4 หลายเดือนก่อน +1

    so sick of subscription apps!!!

  • @sofianeben2490
    @sofianeben2490 4 หลายเดือนก่อน

    Adobe macromedia flash is alive again 😅 I know better performance than swf when Steve Jobs forbid it on the iPhone

  • @Motion_Galaxy
    @Motion_Galaxy 4 หลายเดือนก่อน +6

    haha pls dont compare with after effect! in after effect you can do anything u want. jitter is just preset based. where u can literally use ur brain and show the world wtf u are thinkingggg

    • @orangeshorts8487
      @orangeshorts8487 4 หลายเดือนก่อน

      Uhh no, they are literally 2 separate things. What are you even saying

    • @SajanSingh-mj8eh
      @SajanSingh-mj8eh 2 หลายเดือนก่อน

      ​@@orangeshorts8487 No he is right. What are you even saying?

  • @kazebuke4100
    @kazebuke4100 3 หลายเดือนก่อน

    Pretty cool, but Jitter just seems like a poor attempt t ocopy Rive. As an animated, there seem to be quite a few limitations and things Jitter devs didn't consider. It seems more than good enough for masic animation of elements, but nothing special.

  • @Alex29196
    @Alex29196 4 หลายเดือนก่อน

    Here Blender comes again.

  • @user-ln7nt5re3e
    @user-ln7nt5re3e 4 หลายเดือนก่อน

    Seriously another monthly subscription? hell no, i'm already paying for adobe so might as well use ae then gsap or lottie for the development.

  • @j.jarvis7460
    @j.jarvis7460 3 หลายเดือนก่อน

    framers ai tool is lack luster imo.

  • @MS-gn4gl
    @MS-gn4gl 3 หลายเดือนก่อน

    The minute you say webbased is the minute I say no thanks.

  • @mTechPenn
    @mTechPenn 2 หลายเดือนก่อน

    as soon as I hear "web based." I'm out. What are so many new tools web based? We have powerful cpus in 2024...and many of us work offline

  • @gilumanski8175
    @gilumanski8175 3 หลายเดือนก่อน +1

    this is crap

  • @gaston.
    @gaston. 3 หลายเดือนก่อน

    not even comparable to After Effects... another powerPoint type frustration browser based tool.... useless for serious animators.