W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2019

[csswg-drafts] [css-easing] extend cubic-bezier() to take additional pairs (#3838)

From: Adam Argyle via GitHub <sysbot+gh@w3.org>
Date: Wed, 17 Apr 2019 21:29:13 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-434494424-1555536552-sysbot+gh@w3.org>
argyleink has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-easing] extend cubic-bezier() to take additional pairs ==
### Why
Physics aren't likely to land any time soon to help folks with spring, bounce or cliff effects, and there's big demand for these engaging and lifelike animation tactics. Due to lacking phsyics, folks bring in javascript animation libraries to do the work, or visit websites that generate 100s of keyframes, or just flat out abuse the `cubic-bezier()` function. JS libraries and `cubic-bezier()` abuse being the most common, since it's the easiest. 

Most of these workarounds result in difficult to manage, rigid or uncanny animations that don't make the web look very great at animation. 

### Examples
cubic-bezier()
https://codepen.io/AdrienBachmann/pen/VYVvGo

JS library (34kb)
https://codepen.io/rossorthwein/pen/XorVVV

### Proposal
I think we could pacify the need for physics by adding the ability for `cubic-bezier()` to take more points. Extend `cubic-bezier()` to chain/concat points together.

**Current**
![Screen Shot 2019-04-17 at 2 12 58 PM](https://user-images.githubusercontent.com/1134620/56321248-01940580-611b-11e9-94f0-02051fcd1606.png)

**Proposed**
Where we currently have 2 pairs passed into `cubic-bezier()`, we allow passing additional pairs so more points could be created. 

Explode out:
![austin-saylor-explode-out-ease-in](https://user-images.githubusercontent.com/1134620/56321526-bd553500-611b-11e9-8ddf-a2482183390c.gif)
![austin-saylor-explode-out-ease-in](https://user-images.githubusercontent.com/1134620/56321532-bfb78f00-611b-11e9-9aa6-e13d328bad85.png)
[source](https://www.austinsaylor.com/blog/2015/3/20/4-after-effects-graph-editor-basics-you-need-to-know)




```css
.animated-layer {
  transition: .2s cubic-bezier(.17,.67,.83,.67,.2,.02,.73,.59, ...);
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3838 using your GitHub account
Received on Wednesday, 17 April 2019 21:29:18 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:07 UTC