Jump to content
Search Community

linear with ease in at end

friendlygiraffe test
Moderator Tag

Recommended Posts

//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!

  • Like 2
Link to comment
Share on other sites

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 :

 

 

Screenshot 2021-11-02 at 17.38.49.jpg

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 


Screenshot 2021-11-03 at 10.08.26.png

  • Like 1
Link to comment
Share on other sites

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

 

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