ai / ai/easings.net

Different cubic-bezier() presets in Chrome DevTools

Aberta
#153 0 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
CSS
Estrelas
8.7k
Forks
696
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

This is more curiosity than anything. I noticed that the `cubic-bezier()` presets in Chrome DevTools are different from the values here.

For example, this is what Chrome DevTools suggests for `Out - Cubic`:

![screenshot-20220317-202350](https://user-images.githubusercontent.com/2036475/158870539-9a214846-5de0-427d-8841-a4540e6b8840.png)

And this is what Easings.net's `easeOutCubic` looks like:

![screenshot-20220317-203646](https://user-images.githubusercontent.com/2036475/158872670-8f6bb262-1710-4931-8be9-babb93a0540c.png)

Although the values look quite different, I compared them in DevTools, and the resulting curves are very similar. But, not exactly the same.

I find this rather strange since Google themselves reference and recommend Easings.net here:
https://developers.google.com/web/fundamentals/design-and-ux/animations/choosing-the-right-easing

My understanding was that easing functions were predefined mathematical equations, not open to interpretation. So how is it that these can differ?

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.