Jump to content
GreenSock

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

Javascript custom ease?

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

Very cool, Blake! Thanks for sharing. Ideally it'd be cool to allow more points on the Bezier, but I know that's quite a bit more complex :) 

Link to comment
Share on other sites

Yeah, I was thinking about that while making it. You could make some really interesting effects using multiple curves. I've already made a bunch of different path editors, so it wouldn't be that hard implement. However, I don't think I'm going to spend anymore time on this. It doesn't look like there is going to much interest in this, so I'll just leave it as it is.

 

Somebody else can change it if they want. The hard part is done, and that was finding a fast way to get the x-intercept. Most of the code in that Gist is based on this.

https://chromium.googlesource.com/chromium/blink/+/master/Source/platform/animation/UnitBezier.h

 

I added a dropdown list with some of the easings used by GSAP. But of course I could only include the ones that can be approximated with one Bezier, so no easings like bounce.

 

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

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

Super useful tool, thanks Blake!

 

I used this to create a 'Ken Burns' effect (scaling an absolutely-positioned, 'faux background image' from 1 to 1.5 over the course of about 20 seconds) in a plugin I'm building. Traditional easing functions (like ease-out) accelerated too fast at the start; I needed something that started off 'linear' and slowly eased out so that, at the end of the animation, you didn't notice a jerky stop to the scaling. 

 

This made it easy as pie. Much appreciated. 

 

Dave Bloom

  • Like 1
Link to comment
Share on other sites

Thanks! I only created this to figure something else out, so I wasn't planning on updating it. However, @chrisgannon told me it was really useful and was wondering if I could make a couple changes to make it easier to edit and copy stuff. I told him I would, although I haven't started on it yet. But if you have any suggestions to make it better, I'm open to suggestions... although nothing too drastic. I don't have time to recreate the entire thing.

Link to comment
Share on other sites

  • 2 months later...

I made this real easy to do with instructions in Post #24.

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

 

I was working on updating the editor, but then I saw how another library was using easing, and decided it would be better to just start over from scratch. It will let you create easings with an unlimited number points that aren't clamped, so you can do stuff like this.

w7FFcEW.png

 

However, I can't give an estimate of when I can release it because it uses some stuff that is part of an NDA, which will end when I finish the project I'm currently working on.

  • Like 2
Link to comment
Share on other sites

Lol. My bad. But I still want to get paid.

Link to comment
Share on other sites

  • 5 months later...

Just so people don't get confused, I went ahead and put the CubicBezier class into a gist.

 

https://gist.github.com/OSUblake/4d9f0caf980f4ee492ef

 

 

Do you have this code posted anywhere? It's working great for me for doing path deformations... but do you by chance have it posted with a MIT license?

 

At Skype, I'd need to have that otherwise I'd have to rewrite it heavily influenced by your work. :D I'd rather give you credit.

Link to comment
Share on other sites

Actually, everything that is made public on CodePen is MIT licensed. The license is on the details page.

 

vaH5re1.png

 

 

I went ahead and added the license to the gist.

https://gist.github.com/OSUblake/4d9f0caf980f4ee492ef

 

 

And I should be able to release my curve editor by early August. It will let you create more customlizable eases like mojs. There's several different curve types you can use, and they will even work with the BezierPlugin, allowing you to create motion paths.

 

dVcb9Ny.png

  • Like 1
Link to comment
Share on other sites

That's awesome Blake thanks for adding that. That curve editor looks pretty awesome too!

 

Most of the work I'm doing right now is normalizing all the animation values we use in CSS / JS / Video... etc. So cubic-bezier is the best bet currently.

 

- Jordan

 

Actually, everything that is made public on CodePen is MIT licensed. The license is on the details page.

 

vaH5re1.png

 

 

I went ahead and added the license to the gist.

https://gist.github.com/OSUblake/4d9f0caf980f4ee492ef

 

 

And I should be able to release my curve editor by early August. It will let you create more customlizable eases like mojs. There's several different curve types you can use, and they will even work with the BezierPlugin, allowing you to create motion paths.

 

dVcb9Ny.png

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

Hey folks,

 

We just gave Club members advanced access to CustomEase and CustomBounce.

Watch this:

 

 

play with:

Ease Visualizer with CustomEase: http://s.codepen.io/GreenSock/debug/c7683439f68fc7d2dc9c8c14d783f772

Custom Bounce demo: http://codepen.io/GreenSock/pen/d0a65c2742c1e4e0b1ccefd823c8e518?editors=0010

 

EDIT: These tools will be available to all GreenSock account holders (free) when officially released

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

@kateriouis, did you see the video posted above? CustomEase is in JS :) We haven't done the broad announcement/release yet, but it's coming. Club members already have access to it. 

 

Link to comment
Share on other sites

  • 7 months later...

Is there a way to use other easing functions with GSAP without having to use the CustomEase plugin?

Say I want to use this function for tweening:

function bouncePast(t){
		if (t < (1 / 2.75)) {
		  return (7.5625 * t * t);
		} else if (t < (2 / 2.75)) {
		  return 2 - (7.5625 * (t -= (1.5 / 2.75)) * t + .75);
		} else if (t < (2.5 / 2.75)) {
		  return 2 - (7.5625 * (t -= (2.25 / 2.75)) * t + .9375);
		} else {
		  return 2 - (7.5625 * (t -= (2.625 / 2.75)) * t + .984375);
		}	
	}

and then just do something like TweenMax.to("#ball", 1, {x: "+=300", ease: bouncePast});

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