Jump to content
Search Community

Javascript custom ease?

Rollrodrigz 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

Hi, we haven't created any custom ease tools yet.

 

To tween the playback speed of your timeline you could tween the timeScale of the timeline.

//this is your timeline with 40 seconds worth of tweens
var tl = new TimelinetLite()
//populate tl with a bunch of tweens

...

tl.timeScale(0.2) // will make the timeline play very slow


var controller = new TimelineLite();
controller.to(tl, 0.5, {timeScale:1}, 2) //tween the timeScale of tl up to 1 after 2 seconds
controller.to(tl, 0.5, {timeScale:0.2}, tl.duration() - 2) //twen the timesCale of tl back to 0.2 2 seconds before tl ends.
  • Like 2
Link to comment
Share on other sites

  • 2 months later...

There is not a custom ease tool for JS at this time. We have heard a few requests but currently there are other features and tools that have our attention. 

 

If/when one is created we will be sure to mention it in our newsletter / twitter / fb etc.

 

Thanks for asking.

Link to comment
Share on other sites

  • 1 month later...

We definitely plan to implement this feature at some point - it's just a matter of finding the time. We're very hard at work on various enhancements, tweaks, features, etc. in the animation platform. Trust me - this is what we do every day; we're very committed to it. If you have a pressing need for a particular feature on a project you're working on (like CustomEase), feel free to contact us via PM or e-mail if you'd like to hire us on a consulting basis to implement something for you. Otherwise, we'll do our best to get to this as soon as we can, but there are several other things in line ahead of it right now. Thanks for registering your "vote" to get CustomEase ported though :)

Link to comment
Share on other sites

No need to rush, a day only has 24 hours. It was indeed meant to vote ;)

You guys definitely áre convincingly dedicated, and it shows!

Greensock is clever and stable, so I'm happy with everything you come up with next.

I saw Draggable.... briljant and everything is so very well structured!

It's hard to find things that aren't well thought of in the framework.

 

But nice to know you are for hire too. Good to know.

 

Keep it up! I wonder what you guys come up with next ;)

Link to comment
Share on other sites

  • 1 month later...

custom ease would be awesome, i often find i need a tween that eases out more or differently to how it eases in.. combining something like Quad.easeIn with Expo.easeOut for example or easeInQuad then OutBounce. great tween library as is though, the best there is!

Link to comment
Share on other sites

  • 4 months later...
  • 2 months later...

Hi Dave,

 

Most of the folks on this thread are requesting a tool similar to our CustomEase solution for Flash which not only gave you the flexibility of writing your own ease, but also an interactive ease creation tool that let you draw the actual easing curve as shown here:

http://www.greensock.com/customease/

 

When the JS port gets created there are a number of improvements we have in mind. 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
  • 9 months later...
  • 2 weeks later...
  • 3 weeks later...
  • 4 weeks later...
  • 3 weeks later...

I see people asking about using CubicBezier easing all the time, so I thought I would share what I made the other night. This was actually much harder to make than I initially thought. Turns out that using a Bezier for easing is not the same thing as using one for a path. Lesson learned!

 

So this is very similar to the one Frux did, which is based on the old ActionScript one, but with CSS syntax for the Beziers. All you have to do is pass in the x/y values of the two control points, and that's it. It's actually based off how webkit interpolates them, so it's pretty solid.

// Basic usage
TweenLite.to(element, 2, { x, 100, ease: CubicBezier.config(0, 0.8, 0.3, 0.05) });

// Create a named one
TweenLite.to(element, 2, { x, 100, ease: CubicBezier.create("coolEase", 0, 0.8, 0.3, 0.05) });

// Get a named one
TweenLite.to(element, 2, { x, 100, ease: CubicBezier.get("coolEase") });


After building this and now that I know what's going on, I can see a lot of interesting possibilities on how this could be expanded into some other interesting stuff. Until then, you can check out the visualizer I made.

 

To include the easing code in a project, all you need to do is copy the CubicBezier class from the demo.

 

See the Pen OyPGEo by osublake (@osublake) on CodePen

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