Jump to content
Search Community

GSAP Easing Combination (custom ease)

celli 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

I see several posts on creating a custom ease, but this might be more simple than creating a whole custom ease. I am looking for the best way to have an element slide in quickly, and then continue seamlessly at a much slower rate.

 

I put together a simple CodePen, and it is almost exactly what I am looking for, by queuing two different eases and different duration times--except you can see the 'pause' slightly as one tween transitions into the other. I think what's happening is that the velocity actually gets to zero... it would be great if it can get to something just above zero, so that the two tweens can appear more seamless and the element doesn't actually 'pause' for a millisecond before starting the second tween... is this possible ?

See the Pen qOqyVN?editors=001 by celli (@celli) on CodePen

Link to comment
Share on other sites

When you do a new Circ.easeIn the starting velocity is always going to be zero and you are never going to achieve a constant slow rate.

Its a tricky challenge, but I have 2 suggestions

 

1: overlap your first tween with a Linear.easeNone. You probably won't get a perfect match in velocity, but you can get close enough. The Linear ease will ensure that the end of your animation is "constant" and as slow as you like. It will take some tweaking: http://codepen.io/GreenSock/pen/xwRaQW?editors=001

 

2: make use of the fact that our SlowMo ease already smoothly merges an easeOut ease to a Linear ease to an easeIn ease. You can adjust the values of your ease and the overflow of your container so that the viewer never sees it accelerating at the end like: 

http://codepen.io/GreenSock/pen/KdNxBz

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