Animation Easing

[noahcollins]

What do you think about adding support for other transition timings? You have ease in the genCSS function. I could add some other common timings.

• ease-in
• ease-in-out
• ease-out
• linear
• step-start

If that sounds interesting, let me know how you'd like to map the declarative language. I have a rough concept for how this might look.

Keep ease as the default, and let users explore the other timings when they're ready.

So the "move" keyword would represent the default ease timing.

enter from the top and move 50px over 1.33s

And the rest would be declared something like:

enter from the top and move 50px over 1.33s and ease-in
enter from the top and move 50px over 1.33s and ease-in-out
enter from the top and move 50px over 1.33s and ease-out
enter from the top and move 50px over 1.33s and linear
enter from the top and move 50px over 1.33s and 5 steps

Or:

enter from the top and ease-in 50px over 1.33s
enter from the top and ease-in-out 50px over 1.33s
enter from the top and ease-out 50px over 1.33s
enter from the top and move linear 50px over 1.33s
enter from the top and move in 5 steps 50px over 1.33s

move 66px and enter and ease-in from the bottom after 1s
move 66px then enter from the bottom after 1s in 5 steps
...

Going with a default keeps things nice and clean for people who don't want to mess with timings.

For reference, the MDN docs on CSS transform timing functions.

[jlmakes]

Hey Noah,

I like where this is headed; I think something like your second example fits well; e.g:

<foo data-scrollreveal="enter left and ease-in 25px over 1.5s">

The language gets a little funky for linear and step easing though. For example:

<foo data-scrollreveal="enter left and linear 25px over 1.5s">

Perhaps adding support for ease-in ease-in-out and ease-out as alternatives to move is a simple step forward, and we solve the linear and step easing syntax later?

[noahcollins]

Agreed. I'm going to think about linear and step over the weekend and see if there's any easy approach to including them.