Improve your animations by adding weight to them

Key Takeaways

if you ever need to animate something open and close like I'm doing here you could use a simple easing function like we have here it doesn't look too bad but you can really improve this by adding some weight to it and to do that I'm going to add in an animation timing function here using the linear function and with the linear function it looks kind of crazy you can give it lots of points don't worry I'm not going to expect you to make this on your own uh we get a lot of points coming in here and I'm going to add the same thing over here to when I'm closing it when I click this it's going to bounce open and when I do this it's going to bounce close it has some weight to it you can almost feel it hitting the bottom and then feel it as it's hitting as it's closing makes me so happy seeing things like this uh and the cool thing with this is I still just have two key frames and that's it I have a from ne2 it could be a 0% 100% nothing fancy here all the magic is being done through this timing function that is right here so I actually got this specific one from this website which is linear timing function. netlify apppp where it gives you all the complicated stuff that's going on but then you get the regular functions that it creates right there and there are a few presets that you can use from here in this example I was using the bounce one another place with some handy presets is Adam argyle's open props where if we go down to the easing section here and I scroll down a little bit there is the spring ones that have a nice little bounce to them uh right here so you can see we get a nice little springy bounce on all of those just look up in linear easing function generator and I'm sure you'll find something to just add a little bit of that extra touch to those animations that you have on your site