Jump to content
Search Community

How does `Ease Visualizer` draw the graphs?

Tahir Ahmed test
Moderator Tag

Go to solution Solved by OSUblake,

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

How does the Ease Visualizer [Link] draws graph based on the selected ease? What properties are being animated that change the graph's points to mimic the selected ease equation?

 

I tried to make sense of it all by looking into the source code but minified sources melt my brain even after using some online beautifiers (they cannot really beautify variable and method names of course or am I missing something?).

 

I am trying to create something similar, for fun purposes and to quench my curiosity.

Link to comment
Share on other sites

Actually, JamieJefferson built almost that whole thing. You'd have to check with him, but he hasn't been around the forums for a while (unfortunately - we miss him). I believe he's just populating the "d" attribute of a <path> with a bunch of sequential "L" (line) instructions, that's all. I hope that helps! We'd love to see what you come up with for your project. 

  • Like 2
Link to comment
Share on other sites

I really can't help with how all the svg line parsing works that Jack mentioned, but I have some ideas for getting the values you may need for a visualizer:

 

Ease.getRatio() allows you to pass in a progress value (0 to1) and it will return a ratio that you would then apply to some property. 

 

Here is a really quick and dirty ease visualizer that creates a hundred bars and uses getRatio to set their scaleX.

var ease = Circ.easeInOut; //try Back.easeOut Bounce.easeOut SteppedEase.config(10) 

for (var i = 0; i<100; i++){
  var bar = $("<div/>", {class:"bar"}).appendTo(".container");
  TweenLite.set(bar, {x:i * 5, scaleY:ease.getRatio(i/100), transformOrigin:"left bottom"});
}

http://codepen.io/GreenSock/pen/zvLorB?editors=011

 

note: that demo will blow up if you try Back.easeIn or other eases that generate values less than 0. 

 

Another, more verbose method would be to create a dummy tween that changes a property from 0 to 1. You can then loop through the progress in increments and use the current property value to plot some coordinates like: http://codepen.io/GreenSock/pen/NGBbjZ?editors=001

 

regardless of what method you choose you could plot a bunch of little dots really really close together (as opposed to stretching bars) or use those values for svg paths 

  • Like 4
Link to comment
Share on other sites

  • Solution

The easiest way to do this is probably to use an SVG polyline so that you can work directly with an array of numbers. I did this to show somebody that using Bezier curve for an easing does not work as expected. Here's that example showing the ease taking a different path. Since I already had the solution, I just made it into a custom 

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

 

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

 

There's one problem with creating the graph in real-time, the progress values will not always be the same. So if your computer slows down, the graph can be a little off. It might also plot the stepped ease with slopes. It would probably be better to fill an array with 1000 points, just like Carl did with the bars. To animate it you can take a slice of the array based on the progress and apply that to the polyline.

 

Here's Carl example creating the polyline in real-time. Notice how the curve might change a little bit for each animation.

 

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

  • Like 4
Link to comment
Share on other sites

Nice work, Blake! Very cool. I chucked a SteppedEase in like you said and saw the slopes. 
I took a peak at our Ease Visualizer and it seems it is using a mask / clip_path to reveal the white curve instead of building it with new points in real time. 

  • Like 1
Link to comment
Share on other sites

Here it is with the DrawSVG Plugin. Using a 1000 points, stepped ease still has a slope, so to make that work you would have to manually calculate the progress based on the number of steps. Another thing that might be confusing is that the x axis is time, which is constant, so that is why I used a linear ease to tween it. The points already have the ease applied to them.

 

See the Pen b63a6100ad6cfd85c8f1aef9a56f2e17?editors=001 by osublake (@osublake) on CodePen

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