Animating elements in your mobile applications is easy.

Smooth as Butter: Achieving 60 FPS Animations with CSS3

https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

I’ve been trying to an animation like this one but still haven’t managed to do it as smooth. Do you have any recs or sources that could help me out? 🙏

Oh this looks interesting 👀 Just signed up for the waitlist!

3. Use custom eases, here’s my favourite: cubic-bezier(0.16, 1, 0.3, 1)

I’ll find some resources when I’m around my Mac!

This is a great article explaining how to achieve 60fps, it goes into the technical reason too!

https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

1. Only ever animate transform & opacity (you’ll be surprised how much you can do with just that).

2. Never use ‘transition: all’ make sure to target the styles like: ‘transition: 0.3s ease transform, 0.3s ease opacity’

Posts