argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.78k stars 193 forks source link

Add `--ease-anticipate-*` easings #248

Closed argyleink closed 1 year ago

argyleink commented 2 years ago

these would be complimentary to --ease-elastic-* in that elastic easing ends with a bounce and the anticipate easings would start with a bounce. we have --ease-squish-* which bounces both sides also. so adding these easings would give folks that disney type anticipatory animation start.

this task is to add 5 more easings that should be very similar to elastic

todo:

argyleink commented 2 years ago

a strong proposal by Jhey is to name it --ease-elastic-in-* 👍🏻 the only bummer is it might mean renaming the other elastic easings and creating a breaking version. i think i'm down with the tradeoff tho, cuz this looks nice:

/* today */
--ease-elastic-3
--ease-anticipate-3 (to do)
--ease-squish-3

/* proposed breaking change */
--ease-elastic-out-3
--ease-elastic-in-3
--ease-elastic-in-out-3
argyleink commented 2 years ago

--ease-windup-* is another contender

argyleink commented 2 years ago
--ease-out-elastic-3
--ease-in-elastic-3
--ease-in-out-elastic-3
621alexl commented 1 year ago

Working on this now for TS Open.