Jump to content
Search Community

Blending easings just like gradients

Ninili 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

Sometimes I thought it would be nice to blend easings from one type to another while time goes by.

And then it would be cool to have as much control over how the blending is done as possible.

 

So I created a showcase, not yet a real easing plugin. I don't know how useful it might be to GSAP users, but there are some applications like: Going from linear to an elastic ending or from rough ease to clean ease.

This might be especially interesting for long tweens maybe.

 

The syntax is:

mixTween(eases,ratios,blendTweens)

// example:
mixTween(
  [Linear.easeNone,Elastic.easeOut],
  [0.2,0.4],
  [Power2.easeInOut]
);
  • The first array, eases, can be an array of at least 2, but as many eases you like.
     
  • The second array, ratios will define the time-points of the eases. In the above example, the tween will stay linear until 20% of the tween. Then it starts blending to Elastic.EaseOut until 40% of the tween and stays EaseOut until the end.
    This parameter can be ommitted. If ommitted, evenly spaced values are calculated.
     
  • The third array defines HOW the blending should be made. Just linear blending (default if ommited) won't always look best. So you can use any easing function to define how fast one ease blends into the other.
    In the example above, the easing is smoothly transitioned by a Power2.easeInOut, so there won't be any "sharp" change when the blending begins.

You might get a good example of what this does by looking at the codepen I left here :)

I could imagine this to be implemented in a similar way to CustomEase. like BlendedEase(...)

See the Pen jyYdoo by ninili (@ninili) on CodePen

Link to comment
Share on other sites

Thanks Jack! :)

 

I wonder if this could be run as a "CustomEase" module, also performance-wise. I noticed that there is a function that converts Eases into SVG paths that is also used in the Ease Visualizer. And those are optimized for runtime performance.

 

The way I did the blending, there are at most 4 tweening and easing processes running at the same time:

1. the main timeline that contains the "gradient"

2. the source easing function

3. the destination easing function

4. The "how to blend" easing function

... one could even ease the main timeline to enable some funky time-distortion... as a fourth parameter.

So this isn't really as fast as it could be.

Although GSAP is quite fast doing tweens, any performance optimization would be helpful :)

The only thing is that the whole syntax for javascript modules sometimes boggles my mind. I usually think of myself of a good JS programmer but when looking at some modules that were made to "work properly within the system" I think "I know nothing."

Link to comment
Share on other sites

Yeah, the performance stuff is an obsession of mine, and I totally see what you mean about some opportunities in your code to eek out better results. In fact, it could probably be made to be 10x or more faster at runtime. I don't have a lot of time right now to show you all of it, but the general idea is that I've got some methods that plot points along the curve (at small increments) and then significantly reduce the number of those points by tracing it and using as few as possible (based on a threshold of deviation). Then, that SVG is used for the CustomEase. CustomEase, in turn, has its own optimizations to create a super-fast lookup table of sorts that leans on linear interpolation.

 

It's not quite as advanced, but there's actually a CustomEase.getSVGData() method you could use, and just feed in an object that has a "getRatio()" method (all GSAP eases have that) and it'll plot all the points and spit back an SVG path data for you. That could be used to create your own CustomEase instance accordingly. 

 

So, again, you'd just need to modularize your code so that there's an object with a getRatio() that accepts a progress value between 0 and 1 and then spits back the adjusted/eased value (also typically between 0 and 1, but not always, like for Elastic, etc.) 

 

https://greensock.com/docs/#/HTML5/GSAP/Easing/CustomEase/getSVGData/

  • Like 2
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...