Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ninili

Blending easings just like gradients

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

Share this post


Link to post
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."

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×