Jump to content
GreenSock

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

linear with ease in at end

Recommended Posts

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

 

 

Screenshot 2021-11-02 at 13.32.10.jpg

Link to comment
Share on other sites

Hi @friendlygiraffe,


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

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

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:

 

 

Untitled.jpg

Untitled2.jpg

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

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/

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

1 minute ago, Cassie said:

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

 

Here's the original thread about it...

 

 

  • Like 1
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.
×