linear with ease in at end

[friendlygiraffe]

Is there simple way to create a linear.none ease but with a slight deceleration in the last 10%?

 

Something like this:

 

Without CustomEase plugin ideally

 

 

[Cassie]

Hi @friendlygiraffe,

Personally I would just use customEase  - Interested in why you would want to do it without?

 

 

[friendlygiraffe]

1 minute ago, Cassie said:

Hi @friendlygiraffe,

Personally I would just use customEase  - Interested in why you would want to do it without?

 

 

It's for a banner, so I didn't want to have to include it

[PointC]

You could split the animation into two tweens. The first would be 90% of the distance with a linear ease and the second for the final 10% with a power1 (or whatever). Just a thought. 

[Cassie]

I just remembered this helper function exists! ?

See the Pen JjPyWwx by GreenSock (@GreenSock) on CodePen

[Cassie]

//just feed in the starting ease and the ending ease (and optionally an ease to do the blending), and it'll return a new Ease that's...blended!
function blendEases(startEase, endEase, blender) {
    var parse = function(ease) {
            return typeof(ease) === "function" ? ease : gsap.parseEase("power4.inOut");
        },
        s = gsap.parseEase(startEase),
        e = gsap.parseEase(endEase),
        blender = parse(blender);
    return function(v) {
      var b = blender(v);
      return s(v) * (1 - b) + e(v) * b;
    };
}
//example usage:
gsap.to("#target", {duration: 2, x: 100, ease: blendEases("none", "power1.out")});

Hope this helps!

[PointC]

[friendlygiraffe]

1 hour ago, Cassie said:

//just feed in the starting ease and the ending ease (and optionally an ease to do the blending), and it'll return a new Ease that's...blended!
function blendEases(startEase, endEase, blender) {
    var parse = function(ease) {
            return typeof(ease) === "function" ? ease : gsap.parseEase("power4.inOut");
        },
        s = gsap.parseEase(startEase),
        e = gsap.parseEase(endEase),
        blender = parse(blender);
    return function(v) {
      var b = blender(v);
      return s(v) * (1 - b) + e(v) * b;
    };
}
//example usage:
gsap.to("#target", {duration: 2, x: 100, ease: blendEases("none", "power1.out")});

Hope this helps!

this very cool, good to know for future, but not quite right - the green line needs to be straight, up until the last say 10% of the duration :

 

 

[Cassie]

There's a third parameter to 'blend' the eases together too. ✨

See the Pen PoKOVpb by GreenSock (@GreenSock) on CodePen

[GreenSock]

And here's another version that allows you to tell it a progress value (0-1) of where you want it to start doing the blending, so 0.5 would be halfway through: 

function blendEases(startEase, endEase, blender, startBlendProgress) {
    var s = gsap.parseEase(startEase),
        e = gsap.parseEase(endEase),
        p = startBlendProgress || 0,
        blender = gsap.parseEase(blender || "power3.inOut");
    return function(v) {
      if (v <= p) {
        return s(v);
      }
      var b = blender((v - p) / (1 - p));
      return s(v) * (1 - b) + e(v) * b;
    };
}

 

See the Pen vYJWPQj?editors=0010 by GreenSock (@GreenSock) on CodePen

[friendlygiraffe]

Thanks a lot, but that still accelerates, I don't want an y acceleration, only deceleration towards the end. here's more what I mean:

 

 

[Cassie]

In those examples your animation wouldn't actually start right at the beginning value or fully complete.

You could do something like this with customEase - but the animation would no longer be linear. It would gradually get faster and then  decelerate. 

[PointC]

You could sorta fake it with two tweens and sine ease on the second one. You'll need to travel around 95% of the distance over 90% of the duration on the linear tween for this to work. Something like this. I don't know if that works well enough. Just a thought. ?‍♂️

 

See the Pen db43ebcac3af0c103a5f4e056088d7da by PointC (@PointC) on CodePen

 

[OSUblake]

You can probably do this with SplitEase, and yes, it will work with GSAP. Try the visualizer using power instead of sine.

 

https://split-ease.js.org/

 

[Cassie]

Oooh that's cool. I've never heard of that before.

[OSUblake]

1 minute ago, Cassie said:

Oooh that's cool. I've never heard of that before.

 

Here's the original thread about it...