Loading video...

Video Failed to Load

Go Home

Made a small dialog animation improvement at Linear: Matched the previously mismatched animation duration of overlay and the dialog + swapped spring animaton for an ease-out one so it feels less abrupt. Toast at the bottom right shows whether it’s before or after.

emilkowalski's profile picture

Emil Kowalski

107,113 subscribers

37,539 views • 14 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

before doing the dialog system I wanted to check how would it feel entering houses, so I made a small interior for testing.
0:10

before doing the dialog system I wanted to check how would it feel entering houses, so I made a small interior for testing.

Eduardas Luk

25,928 views • 2 years ago

One of my favorite things from the new Linear homepage are these side drawers which you can open to get some info about a specific feature. Made with Base UI’s dialog component and some ease-out.
0:11

One of my favorite things from the new Linear homepage are these side drawers which you can open to get some info about a specific feature. Made with Base UI’s dialog component and some ease-out.

Emil Kowalski

52,268 views • 4 months ago

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.
0:11

A UX pattern I like: inline dialogs. Instead of blurring the whole background, just push the main content out of focus and replace it with the dialog. Navigation and header stay accessible, and it feels less obtrusive than a standard modal.

Sebastiano Guerriero

51,571 views • 7 months ago

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:
0:15

We had this long-standing papercut at Linear where the menu items overflow their outer container. It was hard to fix, or so I thought, because the structure is pretty complicated given all the design details, so a simple overflow: hidden wouldn’t work as it would break the animation. But today I had an epiphany that we could just use a simple CSS mask and fade the items out. Here’s a before & after with a zoom on the problem, look at the left edge:

Emil Kowalski

122,278 views • 2 months ago

Naruto vs Sasuke! This one is an old animation I did 7 months ago. was kinda proud of that one at the time, a little less now (even tho I learned a lot from it) #NARUTO #animation
0:12

Naruto vs Sasuke! This one is an old animation I did 7 months ago. was kinda proud of that one at the time, a little less now (even tho I learned a lot from it) #NARUTO #animation

Not_H

48,514 views • 1 year ago

Added a little ticker animation to the weight viewer at the top. Is it too much? Or the right amount of fun?
0:16

Added a little ticker animation to the weight viewer at the top. Is it too much? Or the right amount of fun?

Edward Sanchez

31,376 views • 2 years ago

CGI test animation for the unmade Who Framed Roger Rabbit prequel from 1998. Looking back at this animation, It made me wonder how they made this animation in 1998. 3 years after Toy Story. Well, Come one everyone, Lets find out🧵⬇️
0:10

CGI test animation for the unmade Who Framed Roger Rabbit prequel from 1998. Looking back at this animation, It made me wonder how they made this animation in 1998. 3 years after Toy Story. Well, Come one everyone, Lets find out🧵⬇️

The Media Mines

304,428 views • 8 months ago

The people have spoken and Animation has won it. I will move forward with an Animation look, all be it one which is less cartoonish in it's approach and grounded in reality, keep an eye out for more from "Here be monsters" in the future! 👀 made with Dreamina AI
0:15

The people have spoken and Animation has won it. I will move forward with an Animation look, all be it one which is less cartoonish in it's approach and grounded in reality, keep an eye out for more from "Here be monsters" in the future! 👀 made with Dreamina AI

Uncanny Harry AI

16,105 views • 5 months ago

Walk cycle animation before and after the nth attempt…. Never give up if it doesn’t seem right at first it will get better the more time spent on it ..!! #Live2D
0:11

Walk cycle animation before and after the nth attempt…. Never give up if it doesn’t seem right at first it will get better the more time spent on it ..!! #Live2D

Puluki

549,012 views • 1 year ago

I havent seen anyone post about it but one thing that stood out to me the most from the MW4 briefing is how sick the Tactical Nuke animation is. Tactical Nuke is back but the animation is completely different. You call it in a small phone and then a buckle into a skyhook a plane grabs right before the nuke drops and you look back at the map getting nuked. You also flip the map off as you fly away Its one of the sickest things I saw. The video below is an example from MW3 of what i mean.
0:11

I havent seen anyone post about it but one thing that stood out to me the most from the MW4 briefing is how sick the Tactical Nuke animation is. Tactical Nuke is back but the animation is completely different. You call it in a small phone and then a buckle into a skyhook a plane grabs right before the nuke drops and you look back at the map getting nuked. You also flip the map off as you fly away Its one of the sickest things I saw. The video below is an example from MW3 of what i mean.

Tridzo

414,856 views • 4 months ago

Employee of the month material right here. This is how they perform at any job, whether it is getting bread out of pans or getting hired for an IT position at Amazon.
0:12

Employee of the month material right here. This is how they perform at any job, whether it is getting bread out of pans or getting hired for an IT position at Amazon.

Homefront Beacon

57,180 views • 1 month ago

Update out for the Winterpaw Feline! Here's a before and after of one of the improvements I made:
0:12

Update out for the Winterpaw Feline! Here's a before and after of one of the improvements I made:

🌸Julia🌸/ Winterpaw

27,744 views • 7 months ago

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 views • 5 months ago

Why I teach animation | Alex Grigg | Human Made Australian animation director and educator, Alex Grigg has made a career out of engaging ideas executed simply. His love for 2D animation and the autonomy it allows the creator is both heartfelt and infectious. As an educator he imparts his extensive knowledge to eager students he hopes will one day “make something far more interesting than me.” Watch the full episode on Youtube at ✨ Use #ProcreateArtist to your own human made artworks so we can discover them! #Procreate #ProcreateDreams
0:12

Why I teach animation | Alex Grigg | Human Made Australian animation director and educator, Alex Grigg has made a career out of engaging ideas executed simply. His love for 2D animation and the autonomy it allows the creator is both heartfelt and infectious. As an educator he imparts his extensive knowledge to eager students he hopes will one day “make something far more interesting than me.” Watch the full episode on Youtube at ✨ Use #ProcreateArtist to your own human made artworks so we can discover them! #Procreate #ProcreateDreams

Procreate

17,909 views • 1 year ago

OpTic JP That’s 3 look at the animation from the first two pumps. Hand out to the left rise ads. Look at the crouch one same animation which only happens when you start to rise out of prone. He just cancelled it so fast you can’t tell in fast motion.
0:13

OpTic JP That’s 3 look at the animation from the first two pumps. Hand out to the left rise ads. Look at the crouch one same animation which only happens when you start to rise out of prone. He just cancelled it so fast you can’t tell in fast motion.

Chris

77,911 views • 1 year ago

With hand-drawn sprites, giving every enemy a hit animation costs a solid chunk of time, more so if it varies for grounded and aerial state. But it's worth it: the impact feels just so much better. Here's one for comparison! #pixelart #indiedev #animation #wishlistwednesday
0:11

With hand-drawn sprites, giving every enemy a hit animation costs a solid chunk of time, more so if it varies for grounded and aerial state. But it's worth it: the impact feels just so much better. Here's one for comparison! #pixelart #indiedev #animation #wishlistwednesday

Divinum | Out Now!

38,489 views • 8 months ago

I made an animation of the Saja Friends for #SajaBoysWeek and I'm so happy to show it to y'all! ❤️❤️ #kpopdemonhunters #sajaboys
0:16

I made an animation of the Saja Friends for #SajaBoysWeek and I'm so happy to show it to y'all! ❤️❤️ #kpopdemonhunters #sajaboys

SajaSam 🩷 ᴷᵃᶦ ᴹᵒⁿᵗᵉᵃᵍᵒ

24,726 views • 10 months ago

One of the first three issues that Interfaces launched with is about reviewing and watching back animations. I find it super helpful when an animation feels off and I can’t tell why or when I’m trying to understand what actually happens in an animation.
0:17

One of the first three issues that Interfaces launched with is about reviewing and watching back animations. I find it super helpful when an animation feels off and I can’t tell why or when I’m trying to understand what actually happens in an animation.

Jakub Krehel

58,582 views • 4 months ago

It’s cheat day for me, so one last look at the tummy before I destroy an insane amount of food
0:16

It’s cheat day for me, so one last look at the tummy before I destroy an insane amount of food

Kitty-Bit Games & Cosplay~

74,672 views • 2 years ago

So yeah. I did a thing. This is my long overdue half of an art trade with the wonderful Bound Bandit. After the amazing animation of Max and Chloe they made for me, I finally took the plunge into animation I've been meaning to make for so long. I'd love to hear your thoughts!
0:10

Sensitive content

So yeah. I did a thing. This is my long overdue half of an art trade with the wonderful Bound Bandit. After the amazing animation of Max and Chloe they made for me, I finally took the plunge into animation I've been meaning to make for so long. I'd love to hear your thoughts!

TicklishPixels

228,090 views • 2 years ago