Kembali ke video
J

Jitter

Animate a Notification

Platform
YouTube
Durasi
3:44
Bahasa yang diucapkan
Inggris
Tontonan
14 rb
Jeda potongan median
215.82s
Wajah di layar
0%
Frame gelap
2%
Jitter Animate a Notification at 0:00
JitterAnimate a Notification
0:00
Jitter Animate a Notification at 0:03
JitterAnimate a Notification
0:03
Jitter Animate a Notification at 0:04
JitterAnimate a Notification
0:04
Jitter Animate a Notification at 0:08
JitterAnimate a Notification
0:08
Jitter Animate a Notification at 0:09
JitterAnimate a Notification
0:09
Jitter Animate a Notification at 0:10
JitterAnimate a Notification
0:10
Jitter Animate a Notification at 0:20
JitterAnimate a Notification
0:20
Jitter Animate a Notification at 0:26
JitterAnimate a Notification
0:26
Jitter Animate a Notification at 0:27
JitterAnimate a Notification
0:27
Jitter Animate a Notification at 0:49
JitterAnimate a Notification
0:49
Jitter Animate a Notification at 0:56
JitterAnimate a Notification
0:56
Jitter Animate a Notification at 1:42
JitterAnimate a Notification
1:42
Jitter Animate a Notification at 1:54
JitterAnimate a Notification
1:54
Jitter Animate a Notification at 1:58
JitterAnimate a Notification
1:58
Jitter Animate a Notification at 3:10
JitterAnimate a Notification
3:10
Jitter Animate a Notification at 3:14
JitterAnimate a Notification
3:14
Jitter Animate a Notification at 3:34
JitterAnimate a Notification
3:34
Jitter Animate a Notification at 3:39
JitterAnimate a Notification
3:39
Jitter Animate a Notification at 3:42
JitterAnimate a Notification
3:42

Transkrip Animate a Notification

Ditranskripsikan oleh model suara dari audio filmnya sendiri, bukan ditulis oleh mereknya. Klik baris mana pun untuk melompat ke momen itu.

  1. 0:00Hi designers! Today I will be walking you step by step through how to create this
  2. 0:03notification animation from our template gallery. So let's start with the design.
  3. 0:08First of all I will import the icon, give it a width and a height of 120 pixels
  4. 0:14like so. Then insert some text. The first piece of text will be the actual sender
  5. 0:20so that is jitter video, jitter theme like so. We're using a font called Lato.
  6. 0:27I'm gonna set it to black 42 pixels and we have our first piece of text now I
  7. 0:34want a new piece of text but if you hold alt and drag with your mouse you can
  8. 0:38duplicate a piece of text that is already on the screen so this one will
  9. 0:42be remix and make it shine with a little sunshine but it will not be black but
  10. 0:50regular and let's make this actually bold alright and the last piece of text
  11. 0:55we want will be also the same but it will be now a little bit smaller 36 pixels and 40% transparent
  12. 1:05so it's nice and great now i'm going to hold shift select everything and do control g on
  13. 1:12windows command g on mac to group it so we have a new element called notification and we can start
  14. 1:19styling this as well so 960 by 192 pixels a border radius of 56 pixels a
  15. 1:30background color of e6 e6 e6 all right we can center this by looking at the red
  16. 1:38lines and then position everything within our notification once the design
  17. 1:46is ready we can start to animate. So first of all I want the entire notification to get a animation
  18. 1:53in grow in from 60 percent it will be 0.4 seconds long and it will be back. Perfect.
  19. 2:03Then I'm going to copy this animation and select the icon because I actually want a quite similar
  20. 2:09animation on the icon. The only difference is it will be from 50 percent like so and it will be 0.3
  21. 2:15seconds instead of 0.4. All right next up we want some animation on this jitter theme text so let's
  22. 2:24give it an animation slide in it will slide in with a 200 milliseconds delay or duration the
  23. 2:33effect is to the words forward a delay of 50 milliseconds and no smoothing none all right
  24. 2:41perfect and then we want the same animation on the remix text so we can
  25. 2:46just paste it now I'm going to hold shift again select all these elements to
  26. 2:51control G on Windows command G on Mac and rename this to notification in and
  27. 2:58we have our intro animation and all that is left is right here select the
  28. 3:06complete notification and do a shrink out animation which will be out shrink
  29. 3:14out perfect and this will be 0.2 seconds accelerate to 80%
  30. 3:27all right now let's take a look at what we created
  31. 3:34perfect you now successfully recreated the notification animation from our template
  32. 3:38gallery if you have any questions feel free to leave a comment and we will respond as soon as
  33. 3:43possible
33 baris · 519 kata

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 215.82s.

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
Remove your repeat takes with AI - No manual scrubbing of timeline!113 views
FireCut
Remove your repeat takes with AI - No manual scrubbing of timeline!
2:1899 frames93.3s cut100% face
I'm done with terminals122K views
Theo - t3․gg
I'm done with terminals
31:172008 frames349.3s cut100% face
Custom Contact Forms in Stonly835 views
Stonly
Custom Contact Forms in Stonly
4:24130 frames78.2s cut0% face
Design Feedback on Demand ( www.useloops.com )130 views
Loops
Design Feedback on Demand ( www.useloops.com )
1:2130 frames71.2s cut0% face
Hello, MacBook Neo35M views
Apple
Hello, MacBook Neo
3:50291 frames67.5s cut1% face
Take a tour of HEY290K views
37signals
Take a tour of HEY
37:11224 frames61.0s cut100% face
Crazy response on this. There's a shocking amount left to build in 2...79K views
Farza
Crazy response on this. There's a shocking amount left to build in 2...
1:4438 frames60.1s cut100% face
Introducing Ship OS: The agent-native way to ship software. Run your...Launch3.4M views
Notion
Introducing Ship OS: The agent-native way to ship software. Run your...
1:0324 frames52.6s cut13% face
How to use the Studio3K views
Minerva
How to use the Studio
1:0927 frames51.7s cut19% face
Welcome to Minerva56 views
Minerva
Welcome to Minerva
1:1027 frames51.4s cut19% face
Introducing — the fastest way to build AI marketing agents that get u...Launch322K views
Savannah
Introducing — the fastest way to build AI marketing agents that get u...
1:0927 frames51.4s cut22% 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.

Master Facebook Cover Design under 4 MinutesLaunch196 views
Glorify App
Master Facebook Cover Design under 4 Minutes
3:29125 frames4.5s cut0% 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
Required Actions with Stonly1K views
Stonly
Required Actions with Stonly
1:5339 frames0% face
Refreshed.408K views
OpenAI
Refreshed.
1:5090 frames0.8s cut0% face
Base44 Superagents - Your Personal AI Agent28M views
Base44
Base44 Superagents - Your Personal AI Agent
0:5937 frames0.2s 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
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
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

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