Zurück zu den Videos
J

Jitter

Step by step Masking animation

Plattform
YouTube
Länge
4:50
Gesprochene Sprache
Englisch
Aufrufe
16.607
Median-Schnitt
20.98s
Gesicht im Bild
0%
Dunkle Bilder
1%
Jitter Step by step Masking animation at 0:00
JitterStep by step Masking animation
0:00
Jitter Step by step Masking animation at 0:05
JitterStep by step Masking animation
0:05
Jitter Step by step Masking animation at 0:10
JitterStep by step Masking animation
0:10
Jitter Step by step Masking animation at 0:23
JitterStep by step Masking animation
0:23
Jitter Step by step Masking animation at 0:31
JitterStep by step Masking animation
0:31
Jitter Step by step Masking animation at 0:32
JitterStep by step Masking animation
0:32
Jitter Step by step Masking animation at 4:38
JitterStep by step Masking animation
4:38
Jitter Step by step Masking animation at 4:42
JitterStep by step Masking animation
4:42
Jitter Step by step Masking animation at 4:46
JitterStep by step Masking animation
4:46
Jitter Step by step Masking animation at 4:50
JitterStep by step Masking animation
4:50

Transkript von Step by step Masking animation

Von einem Sprachmodell aus dem Ton des Films transkribiert, nicht von der Marke geschrieben. Klicke auf eine Zeile, um an diese Stelle zu springen.

  1. 0:00Hi everyone! A while ago we launched a new feature called masks and in today's
  2. 0:04video we will be recreating the animation you see on the screen right
  3. 0:08here so let's jump right into it. First we will create a design and then we will
  4. 0:13actually animate it but the design is like 90% of the work so let's get
  5. 0:17started. First we give this artboard a background it's gonna be a soft black
  6. 0:23like so. Next up we add a rectangle and so right now I'm actually creating the
  7. 0:27background for the mask so this will not be visible unless behind this circle so
  8. 0:32the color of this background will be red fd3456 this red ish color and then we
  9. 0:41need the masking text itself mass and that one will be Oswald Oswald bold and
  10. 0:49let's make it 120 pixels alright and yep we're gonna have this one be a little
  11. 0:54softer black so it's more pleasing for the eye so let's group these two things
  12. 0:59because this will be our masking background and now we will have to add
  13. 1:03the element that will serve as the mask itself which is this circle right here
  14. 1:08and we want everything behind the circle to be visible so I'm going to give this
  15. 1:12circle a white color but it doesn't matter at all because you won't see it
  16. 1:16you will only see what is behind it and to create this effect you need to put
  17. 1:20the element that you want to serve as the mask underneath the element that you want to be the
  18. 1:26background for the mask then select both of them do right mouse click and mask and so right now if
  19. 1:32you select the ellipse we can move around and you see everything behind it is perfectly visible
  20. 1:38next up we want to add the actual text so we're going to add a new text element this will be
  21. 1:44and it will be in the same font so Oswald bold bold like so and 120 pixels big
  22. 1:55alright and a we're going to align this with the other text and so just to make
  23. 2:02our life easy let's make this mass king align it this way like so I have to make
  24. 2:10perfectly aligned all right and now we will do three duplicates one two three
  25. 2:17align them all the same way and then add the actual colors all right the top one
  26. 2:29will be the ink mask ink so we'll give that a color of where is the color right
  27. 2:35you a color of 7a 7a 40 e d all right so now it has this color and we can remove from this thing
  28. 2:44all the rest let's actually right align it and then remove everything we don't need next up here
  29. 2:52the middle one will be the s and the k so let's remove the ing and the ma so we have the s and
  30. 3:00the K and for a color we want EDF 484 all right now for some reason we lost our
  31. 3:08alignment so let's actually line it right back okay and lastly we have the M
  32. 3:13and the A which will be left aligned like so get rid of all the rest of the
  33. 3:19text and make that our nice red color and that was FD 3456 all right so now we
  34. 3:30have this we want to place our mask on top of it like so and if you see we can
  35. 3:37drag this around and we actually created the effect of the actual animation and
  36. 3:42so now you can animate this the way you want but just to finish this tutorial off
  37. 3:46we'll animate it right here with some custom animations being move move like
  38. 3:53so and we can just use the arrow to drag it to where we want so I'll move it to
  39. 3:57here start a little bit more down like so i want a one second animation natural
  40. 4:05add another action move again this time once it's finished move it down here also one second
  41. 4:14then add another action move let's move it back up to here one second and then the last action
  42. 4:22move we'll be moving it back and we see the we see the little arrows here so we can perfectly move
  43. 4:29it back like so all right and this will be one second or maybe a little bit more let's make it
  44. 4:351.2 seconds and if I'm not mistaken we successfully recreated the animation for the new masking
  45. 4:44feature if you have any questions feel free to leave a comment and we will respond as soon as
  46. 4:49possible
46 Zeilen · 773 Wörter

More from Jitter

All of Jitter →

The rest of their work we have taken apart.

Jitter Beta – A simple animation tool on the web74K views
Jitter
Jitter Beta – A simple animation tool on the web
0:2831 frames0.9s cut0% face
Animate your Company Logo29K views
Jitter
Animate your Company Logo
3:33116 frames3.5s cut0% face
Animated Button Switch (toggle)28K views
Jitter
Animated Button Switch (toggle)
2:35104 frames0.5s cut0% face
Animate your company Logo26K views
Jitter
Animate your company Logo
1:3839 frames2.9s cut0% face
Introducing Jitter 1.0Launch25K views
Jitter
Introducing Jitter 1.0
0:1019 frames0.4s cut21% face

Cut at the same speed

Films whose median shot runs closest to 20.98s.

Introducing Notion 3.0: AgentsLaunch
Notion
Introducing Notion 3.0: Agents
1:3035 frames21.1s cut6% face
The creator of Claude Code teaches more about vibe-coding in 30 minut...955K views
Rahul
The creator of Claude Code teaches more about vibe-coding in 30 minut...
27:55177 frames20.7s cut33% face
Connect Claude and ChatGPT to Superhuman Mail with MCP | Setup + First Prompt (2 Minutes)876 views
Superhuman Mail
Connect Claude and ChatGPT to Superhuman Mail with MCP | Setup + First Prompt (2 Minutes)
3:48124 frames21.3s cut52% face
Introducing Nothing OS 5.0Launch202K views
Nothing
Introducing Nothing OS 5.0
1:1528 frames21.6s cut4% face
What Is D-ID? Create AI Videos and Interactive Visual AI Agents346 views
D-ID AI Video Platform
What Is D-ID? Create AI Videos and Interactive Visual AI Agents
2:0695 frames20.0s cut28% face
Shopify Editions Winter ’26 | TrailerLaunch
Shopify
Shopify Editions Winter ’26 | Trailer
0:3515 frames19.9s cut33% face
Introducing Socialite: the world’s first AI employee that works 24/7 ...Launch216K views
Sean Rich
Introducing Socialite: the world’s first AI employee that works 24/7 ...
1:2333 frames22.1s cut100% face
Meet Database Agents. A team of li’l librarians in your database — k...300K views
Notion
Meet Database Agents. A team of li’l librarians in your database — k...
0:3515 frames19.4s cut0% face
Tutorial: Team Collaboration186 views
Infinity Maps
Tutorial: Team Collaboration
1:1530 frames22.7s cut7% face
Getting started with Claude Cowork403K views
Claude
Getting started with Claude Cowork
4:16329 frames19.1s cut0% face
https://t.co/OVuIhnRm6v →685K views
Lovable
https://t.co/OVuIhnRm6v →
0:3749 frames23.0s cut0% face
And We Shall Dance Again: Gucci Primavera78K views
GUCCI
And We Shall Dance Again: Gucci Primavera
4:29139 frames19.0s cut64% face

Lit and framed like this

Closest on how much of the running time has a face in it and how dark the frames are.

Découvrez Mayday, leader des plateformes de knowledge management720 views
Mayday
Découvrez Mayday, leader des plateformes de knowledge management
4:33132 frames268.5s cut0% face
Today we're opening up a new experimental multiplayer worldbuilding t...255K views
Midjourney
Today we're opening up a new experimental multiplayer worldbuilding t...
21:211403 frames12.6s cut0% face
Like a post with ‘Made in Figma’ You’ll get a surprise29M views
Figma
Like a post with ‘Made in Figma’ You’ll get a surprise
1 frames0% face
Everything we launched at Make with Notion27M views
Notion
Everything we launched at Make with Notion
1:0326 frames11.5s cut0% face
Introducing Sakana Fugu: A full multi-agent orchestration system acce...Launch26M views
Sakana AI
Introducing Sakana Fugu: A full multi-agent orchestration system acce...
5 frames0% face
What is ClickUp?22M views
ClickUp
What is ClickUp?
1:2835 frames23.3s cut0% face
Introducing ChatGPT Images 2.0 A state-of-the-art image model that c...Launch13M views
OpenAI
Introducing ChatGPT Images 2.0 A state-of-the-art image model that c...
1:0062 frames0.8s cut0% face
Your Base44 Superagent is waiting13M views
Base44
Your Base44 Superagent is waiting
0:4321 frames1.4s cut0% face
Power Your Performance: Know Your Cache, Own Your Speed with Cloudflare Cache Analytics13M views
Cloudflare
Power Your Performance: Know Your Cache, Own Your Speed with Cloudflare Cache Analytics
0:3011 frames0% face
Oikos Blended - Forkable Peach10M views
OIKOS Protein
Oikos Blended - Forkable Peach
0:158 frames4.0s cut0% face
Computer now connects with Plaid to link bank accounts, credit cards,...6.2M views
Perplexity
Computer now connects with Plaid to link bank accounts, credit cards,...
1:0321 frames0% face
Imagine every pixel on your screen, streamed live directly from a mod...6.0M views
Zain Shah
Imagine every pixel on your screen, streamed live directly from a mod...
0:146 frames0% face

More social

Same category, other makers, most watched first.

Your ideas, your apps—Base44622M views
Base44
Your ideas, your apps—Base44
0:5651 frames1.1s cut6% face
Turn any idea into an app with Base44538M views
Base44
Turn any idea into an app with Base44
0:5538 frames2.2s cut50% face
Build Your Website with One Sentence | Base44154M views
Base44
Build Your Website with One Sentence | Base44
0:4835 frames0.9s cut31% face
Rip The Script | Nike Football81M views
Nike Football
Rip The Script | Nike Football
6:00310 frames1.1s cut60% face
PetSmart | "Pickup in...STORE!"75M views
PetSmart
PetSmart | "Pickup in...STORE!"
0:1511 frames1.4s cut64% face
NEO The Home Robot Order Today69M views
1X
NEO The Home Robot Order Today
9:53271 frames2.8s cut25% face
Apple Education: Ready for every learning opportunity69M views
Apple
Apple Education: Ready for every learning opportunity
1:4687 frames1.3s cut40% face
Phone calls suck. So, we bought a giant telephone car, raised $65,00...64M views
Bland
Phone calls suck. So, we bought a giant telephone car, raised $65,00...
1:4854 frames4.3s cut81% face
The Impossible Return – OIKOS 15s Commercial 202646M views
OIKOS Protein
The Impossible Return – OIKOS 15s Commercial 2026
0:1517 frames1.0s cut65% face
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...39M views
Figma
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...
1:0423 frames4.0s cut78% face
Getting Help is Simple, With Hims36M views
hims
Getting Help is Simple, With Hims
0:3023 frames2.0s cut70% face
Made in Figma (2025) Like this ❤️ we designed it for you36M views
Figma
Made in Figma (2025) Like this ❤️ we designed it for you
0:3872 frames0.5s cut7% face
Browse every frame in the library