Zurück zu den Videos
J

Jitter

Animated Button Switch (toggle)

Plattform
YouTube
Länge
2:35
Gesprochene Sprache
Englisch
Aufrufe
28.162
Median-Schnitt
0.54s
Gesicht im Bild
0%
Dunkle Bilder
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

Transkript von Animated Button Switch (toggle)

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 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 Zeilen · 402 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
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