question - advanced custom bezier easing

[Kris-B]

Hi @jeremyckahn Is it possible to define a custom bezier easing function which could use other starting-ending points then (0 ; 0) to (1 ; 1)? And maybe with more than 2 points between?

Thanks

[jeremyckahn]

Hi @Kris-B, I haven't seen you on Github for a little while. :)

While there's no high-level Shifty API that that will create an easing curve as complex as what you are describing, the easing subsystem should allow for this. That is, a more elaborate version of shifty.bezier.js that supports this could be implemented. After all, easing functions in Shifty are just functions attached to Tweenable.prototype.formula.

I'm not good enough at math to know how to define such an easing curve, but the code in shifty.bezier.js could probably be used as a jumping-off point for this. If this is something you'd like to tackle, I'm happy to help you get it into the project via a PR!

FYI: If you decide to give this a try: I am working on Shifty 2.0 in the poorly-named develop/webpack branch. It's getting pretty close to completion, and I'm hoping to release it within the next few weeks. It's the same basic library, but authored in ES6 with some API improvements. Some of the changes in 2.0 would impact how you implement it, but I don't think it would be difficult to port, and I'd be happy to do that work for you.

[jeremyckahn]

Update: 2.0 is now released.

Closing this for now; feel free to reopen if you'd like to make a PR.

[Kris-B]

hi @jeremyckahn ;-)

I made some experiments with custom easing functions. Actually, I would like to tween from 0 to 0, and use a bezier function to calculate values between.

To achieve this, I'm using this:

shifty.tween({ 
  from:     { t: 0 },
  to:       { t: 1 }, 
  duration: 2000,
  easing:   pos => getBezier(pos, P1, P2, P3, P4).y,
  step:     state => output.innerHTML += Math.round(state.t*1000)/1000 + '<br>'
});

This works well except for the last value which is always 1 (the "to" value). Here's a codepen to see it in action: http://codepen.io/Kris-B/pen/ybzPbe

This use is surely borderline but do you have an advice?

[jeremyckahn]

Hi @Kris-B, I think this is a bit of an unusual use case for Shifty, but you should be able achieve the results you want by tweaking the application code. Here's a quick fork of your codepen: http://codepen.io/jeremyckahn/pen/wdrjRd

Your getBezier code looks interesting. It would be cool to incorporate that into the library itself, but I don't understand the math enough to say if it's generic enough to fit into a wide variety of use cases. Could you explain how it works a bit, or perhaps point me to some resources to better understand it?

Thanks!

[Kris-B]

I'm far to be a bézier curves expert. I've just started some quick experiments.

Thanks for the modified codepen!

Here's where I found the code : http://13thparallel.com/archive/bezier-curves/

Mike "Pomax" Kamermans wrote a very interesting book about bézier curves: https://pomax.github.io/bezierinfo/

This online tool may also be interesting: https://www.desmos.com/calculator/cahqdxeshd

[jeremyckahn]

Oh, nice! These links will be SUPER helpful for when I get a chance to expand Shifty's Bezier capabilities (which I'd really like to do at some point). Thanks for passing these along! 😃

[hoomanaskari]

@jeremyckahn Are custom bezier easings coming? I saw something very interesting here: https://github.com/jeremyckahn/shifty/blob/develop/src/bezier.js

As I am currently working on this feature in Artboard Studio, is there any timeframe on when this will be released? Any docs for it also?

[jeremyckahn]

Are custom bezier easings coming? I saw something very interesting here: https://github.com/jeremyckahn/shifty/blob/develop/src/bezier.js

Any docs for it also?

There are public APIs for adding and removing custom Bezier easings here:

• https://jeremyckahn.github.io/shifty/doc/shifty.html#.setBezierFunction
• https://jeremyckahn.github.io/shifty/doc/shifty.html#.unsetBezierFunction

I made a little widget a few years ago that utilizes these APIs to modify a custom Shifty easing curve. It's pretty outdated now and not particularly portable anymore, but it may serve as a guide at least:

• Source for the widget: https://github.com/jeremyckahn/bezierizer
• Demo: https://jeremyckahn.github.io/bezierizer/
  • Source for the demo: https://github.com/jeremyckahn/bezierizer/blob/master/main.js

I've used this in my own project, Stylie. You can click the "Motion" tab to add and modify custom easings, and then associate them to timeline tracks for specific animation properties.

I'm not planning to work on expanding Shifty's custom easing support at this point, as I'm focused on other projects these days. However, I'm open to supporting PRs to add generic functionality if there's something you'd like to add to the library! 🙂

[hoomanaskari]

Thanks, Jeremy, that is super helpful. Let's see what I can come up with this one, I am sure there is a way to make work in our app too.