Volver a los videos
J

Jitter

Animated Button Switch (toggle)

Plataforma
YouTube
Duración
2:35
Idioma hablado
inglés
Vistas
28.2 k
Corte mediano
0.54s
Rostro en pantalla
0%
Cuadros oscuros
3%
Jitter Animated Button Switch (toggle) at 0:00
JitterAnimated Button Switch (toggle)
0:00
Jitter Animated Button Switch (toggle) at 0:04
JitterAnimated Button Switch (toggle)
0:04
Jitter Animated Button Switch (toggle) at 0:05
JitterAnimated Button Switch (toggle)
0:05
Jitter Animated Button Switch (toggle) at 0:23
JitterAnimated Button Switch (toggle)
0:23
Jitter Animated Button Switch (toggle) at 0:23
JitterAnimated Button Switch (toggle)
0:23
Jitter Animated Button Switch (toggle) at 0:29
JitterAnimated Button Switch (toggle)
0:29
Jitter Animated Button Switch (toggle) at 0:31
JitterAnimated Button Switch (toggle)
0:31
Jitter Animated Button Switch (toggle) at 2:29
JitterAnimated Button Switch (toggle)
2:29
Jitter Animated Button Switch (toggle) at 2:29
JitterAnimated Button Switch (toggle)
2:29
Jitter Animated Button Switch (toggle) at 2:30
JitterAnimated Button Switch (toggle)
2:30

Transcripción de Animated Button Switch (toggle)

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

  1. 0:00Hi designers! Today I will be showing you how to create the switch animation from
  2. 0:03our template gallery. So let's jump right into it. As you see I am in Figma right
  3. 0:08here because I created the design in Figma and I will use our plugin to
  4. 0:12import it into Jitter. So let's do right click on our artboard, select the plugin
  5. 0:17Jitter, export the Jitter and then open file, open in Jitter. So we have our
  6. 0:25design in jitter now notice that here we have a mask and in jitter we have a
  7. 0:31layer called mask so we're gonna have to select everything do right-click mask
  8. 0:36and now we have the same effect so let's start animating first we will animate
  9. 0:41the complete composition in with a scale will be 0.4 seconds coming from zero so
  10. 0:47it's a complete scale and back so we have this little bounce effect then we
  11. 0:51can just copy this animation select the ellipse and paste it so we have the same
  12. 0:55animation on that one and let's take a look perfect now select both of these
  13. 1:00holding shift then group them and call this our intro or let's call it grow in
  14. 1:08next up we want the actual switch animation so for that it's super easy
  15. 1:12we're going to give a custom animation to the ellipse which will be move move
  16. 1:17like so. We can use our mouse to position it wherever we want it to move to.
  17. 1:23Perfect. And this will be also 0.4 seconds and then lastly we want this
  18. 1:29background right here this rectangle to get a new color animation and it will
  19. 1:34move to a color of 40, 90 or 93 and then F7 so it'll become blue and this will be
  20. 1:430.2 seconds and it will happen at the same time with the previous animation. So that looks pretty
  21. 1:50great. We'll give that the name of switch and then lastly at the very end all the way up here we want
  22. 2:01the complete composition to fade out. So let's take a scale out animations scale out and we want it to
  23. 2:10go to 0% with a 0.3 second acceleration. Now let's crop it and take a look at what we created.
  24. 2:22All right you now successfully created a switch animation using Jitter and Figma.
  25. 2:28If you have any questions leave a comment and we will respond as soon as possible.
25 líneas · 402 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
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 0.54s.

We're announcing our $50M Series B led by Benchmark. Founders Fund an...Launch960K views
Sam Blond
We're announcing our $50M Series B led by Benchmark. Founders Fund an...
0:4478 frames0.5s cut53% face
Cursor can now create new components and frontends in Figma using you...636K views
Cursor
Cursor can now create new components and frontends in Figma using you...
0:2510 frames0.5s cut0% face
How Bloom Built the Playbook Every Founder Will Copy in 202666K views
Open Residency
How Bloom Built the Playbook Every Founder Will Copy in 2026
127:40162 frames0.5s cut60% face
Greylock has spent more than six decades backing founders before the ...687 views
IVERSON
Greylock has spent more than six decades backing founders before the ...
0:4885 frames0.5s cut34% face
starting from zero again is a beautiful thing190K views
bonzo
starting from zero again is a beautiful thing
2:24185 frames0.6s cut48% face
Giga - Hallucination Correction941 views
Giga AI
Giga - Hallucination Correction
1:2948 frames0.6s cut0% face
For those who dare to ship209 views
Instatus
For those who dare to ship
0:5864 frames0.6s cut0% face
last week in tech was unforgettable. (powered by grok @imagine)222K views
Silicon Mania
last week in tech was unforgettable. (powered by grok @imagine)
0:4474 frames0.6s cut65% face
Made some improvements to make your workflows faster. Like a lot fast...114K views
Figma
Made some improvements to make your workflows faster. Like a lot fast...
14 frames0.5s cut100% face
Can't is Dead. Base4415M views
Base44
Can't is Dead. Base44
0:4581 frames0.5s cut42% face
Introducing our ten film finalists for Runway's fourth annual interna...Launch1.0M views
Runway
Introducing our ten film finalists for Runway's fourth annual interna...
0:2737 frames0.5s cut19% face
Introducing Alo x Nigel BarkerLaunch597K views
ALO
Introducing Alo x Nigel Barker
0:5559 frames0.6s cut25% 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.

Introducing BetterBrain — a tool that lets you query, visualize, and ...Launch
Abhishek Bhargava
Introducing BetterBrain — a tool that lets you query, visualize, and ...
2:13101 frames12.2s cut0% face
getting started with magic recorder on rabbit r12K views
rabbit
getting started with magic recorder on rabbit r1
1:3433 frames0% face
Base44 Superagents - Your Personal AI Agent28M views
Base44
Base44 Superagents - Your Personal AI Agent
0:5937 frames0.2s cut0% face
Refreshed.408K views
OpenAI
Refreshed.
1:5090 frames0.8s cut0% face
Required Actions with Stonly1K views
Stonly
Required Actions with Stonly
1:5339 frames0% face
Introducing `Agent-1`: a breakthrough foundation model that can opera...Launch252K views
Matt Shumer
Introducing `Agent-1`: a breakthrough foundation model that can opera...
0:5341 frames0.1s cut0% face
REALME C15 Qualcomm Edition Trailer Commercial Official Video HD | Realme C15 SD4607K views
Argus World Plus
REALME C15 Qualcomm Edition Trailer Commercial Official Video HD | Realme C15 SD460
0:3028 frames1.5s cut0% face
George Hartley ☄️ - I just sent our launch announcement to 10,000 people. It took one pr...Launch563K views
George Hartley
George Hartley ☄️ - I just sent our launch announcement to 10,000 people. It took one pr...
1:0427 frames3.6s cut0% face
Make Kits, rolling out today → Build and teach Make your design syst...136K views
Figma
Make Kits, rolling out today → Build and teach Make your design syst...
0:5927 frames12.0s cut0% face
Master Facebook Cover Design under 4 MinutesLaunch196 views
Glorify App
Master Facebook Cover Design under 4 Minutes
3:29125 frames4.5s cut0% face
Introducing Cursor 2.0Launch9.5M views
Cursor
Introducing Cursor 2.0
1:0423 frames0% face
Introducing Brain in Computer. Brain is a continuously learning memo...Launch611K views
Perplexity
Introducing Brain in Computer. Brain is a continuously learning memo...
1:0623 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
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
Hello, MacBook Neo35M views
Apple
Hello, MacBook Neo
3:50291 frames67.5s cut1% face
Browse every frame in the library