Voltar aos vídeos
J

Jitter

Jitter: Click animation tutorial

Plataforma
YouTube
Duração
1:48
Idioma falado
inglês
Visualizações
13,5 mil
Rosto em cena
0%
Quadros escuros
0%
Jitter Jitter: Click animation tutorial at 0:00
JitterJitter: Click animation tutorial
0:00
Jitter Jitter: Click animation tutorial at 0:25
JitterJitter: Click animation tutorial
0:25
Jitter Jitter: Click animation tutorial at 0:31
JitterJitter: Click animation tutorial
0:31
Jitter Jitter: Click animation tutorial at 0:34
JitterJitter: Click animation tutorial
0:34
Jitter Jitter: Click animation tutorial at 0:40
JitterJitter: Click animation tutorial
0:40
Jitter Jitter: Click animation tutorial at 0:43
JitterJitter: Click animation tutorial
0:43
Jitter Jitter: Click animation tutorial at 1:16
JitterJitter: Click animation tutorial
1:16
Jitter Jitter: Click animation tutorial at 1:25
JitterJitter: Click animation tutorial
1:25
Jitter Jitter: Click animation tutorial at 1:46
JitterJitter: Click animation tutorial
1:46

Transcrição de Jitter: Click animation tutorial

Transcrito por um modelo de fala a partir do áudio do próprio vídeo, não escrito pela marca. Clique em qualquer linha para ir até aquele momento.

  1. 0:00Okay, so we're going to see how to add a click animation onto a cursor and a button.
  2. 0:06So the first thing you want to do is add a little move so that the cursor is on the button.
  3. 0:11And then we're going to scale both the cursor and the button at the same time so that it looks like it's being clicked.
  4. 0:18First I'm going to select my cursor and I'm going to add a new custom animation, a scale animation.
  5. 0:25We're going to scale it down just a little bit for a very short amount of time so that
  6. 0:31it looks like it's being clicked.
  7. 0:34I'm adding a little delay, and I'm starting to click.
  8. 0:38And right after, I'm going to reselect my cursor and add another scale animation.
  9. 0:44And this time I'm going to scale it back to 100%.
  10. 0:49And it's going to take a tiny bit more time.
  11. 0:55it looks like the cursor is actually doing something I'm going to group that and rename that
  12. 1:04it's tidy then we're going to do the button so I'm going to copy so come and see and paste
  13. 1:15the first scale down animation onto my button background not the text and since
  14. 1:26it's a little bit big I'm going to change the value to 99% and I'm going to paste
  15. 1:33again the scale app animation. Alright, looks neat. So here you are, you have a click animation.
15 linhas · 238 palavras

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

Lit and framed like this

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

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
Grab a box, then bend reality Vector editing just got a lot easier (...5.0M views
Figma
Grab a box, then bend reality Vector editing just got a lot easier (...
0:3113 frames15.1s cut0% face
Many drugs work by binding to a specific target in the body and block...4.1M views
Anthropic
Many drugs work by binding to a specific target in the body and block...
0:114 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