Jump to content
Search Community

a super precise easing function type - path easing.

ice-frog test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I found a new animation library: mo.js
http://mojs.io/tutorials/easing/path-easing/

 

motion graphics toolbelt for the web

Fortunately mo· js has the most comprehensive set of easing functions available on the modern web. Besides Base Easing Functions, Bezier Curves and Springs which you can find in other web animation libraries, mo· js  has a super precise easing function type - path easing. It allows you to draw your own timing functions. That's what this tutorial is dedicated to, hang tight!

Link to comment
Share on other sites

Hi ice-frog. Just curious why you're posting about this in the GreenSock forums. I'm sure mo.js is cool and the author is super smart...just struggling to figure out why you're putting this in our forums. Perhaps you meant that folks could use that easing method with GSAP? It should be totally possible with a simple wrapper. We've had plans to create something similar for quite some time, but a few other things have been higher priority. Anyway, happy tweening!

  • Like 1
Link to comment
Share on other sites

Hi jack, exactly like you thought, I actually hope GSAP can also add this function, it is indeed a very useful feature,

Than to write the custom easing functions, it should be a lot easier,and it also very Useful for character animation , 

very glad to hear that there are plans to add this feature to GSAP,great~!

Link to comment
Share on other sites

I made my own custom easing, although it's limited to 1 cubic bezier clamped to a start of [0.0, 0.0] and end of [1.0,1.0].

http://greensock.com/forums/topic/7952-javascript-custom-ease/?p=51357

 

If you really wanted to, it wouldn't be too hard to modify my example to do the type of easing used in mo.js. To find the easing value along a path you would use Newton's root finding method, which I've already implemented.

 

In the following JSX Graph, as you drag point X0 along the x-axis, you can see where the dashed line intersects the path. The y-value of that intersection is what would be returned by the easing function.

 

http://jsxgraph.uni-bayreuth.de/wiki/index.php/Newton%27s_root_finding_method

  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...