Volver a los vídeos
J

Jitter

Step by step Masking animation

Plataforma
YouTube
Duración
4:50
Idioma hablado
inglés
Visitas
16,6 mil
Corte mediano
20.98s
Rostro en pantalla
0%
Fotogramas oscuros
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

Transcripción de Step by step Masking animation

Transcrito por un modelo de voz a partir del audio de la pieza, no redactado por la marca. Pulsa cualquier línea para saltar a ese momento.

  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 líneas · 773 palabras

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