Jump to content
Search Community

Is GreenSock the right tool for this?

ajhalls 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 was working on my timeline GUI (https://ajhalls.github.io/Simple-Animation-Timeline-for-Greensock/) and noticed that when I zoom in and out (using the vertical slider), I get some big lag in the rendering of the timeline ruler / timeline elements. I am currently just using the CSS "left" setting to position everything and am wondering if there is a more efficient way of doing it. I am not sure if I should be using GreenSock, or using a Canvas to reduce the number of things being rendered.

 

I currently render a "|" character positioned in a span for every 10 milliseconds, so within a single 5 second timeline I have 500 elements, plus the major lines and numbers which brings it up around 600. On my main application, I can add multiple objects which each have their own timeline of 600 elements, but all are zoomed simultaneously meaning we are redrawing thousands of items as you drag the slider around. Now depending on the precision of what you want the slider "steps" to be, that could be hundreds of render times between a value of 1 and 2.

 

Here is the code that gets called when the value of the slider changes:

function drawRulers() {
    var timelineHeader = $(".timeline-container-header");
    var scrubberHandle = $(".scrubberHandle");
    timelineHeader.html("");
    timelineHeader.html("");
    for (i = 0; i < timelineLength; i += (10 * 1)) {
        spacing = (i * Number(ZoomValue) + 18);
        var tickMarks = "<span class=\"minorTick\" style=\"left:" + spacing + "px;\">|</span>";
        timelineHeader.append(tickMarks);
    }
    // Numbers and red lines
    for (i = 0; i < timelineLength; i += (100 * 1)) {
        spacing = (i * Number(ZoomValue) + 16);
        var numbers = "<span class=\"timelineNumbers\" style=\"left:" + spacing + "px;\">" + i + "</span>";
        timelineHeader.append(numbers);
        var majorLines = "<span class=\"majorTick\" style=\"left:" + spacing + "px;\"><b>|</B></span>";
        timelineHeader.append(majorLines);
        timelineHeader.css("width", spacing + 100);
    }
    $(".timelineElementRow").css("width", spacing + 100);
    $(".timeline-container").on("click", scrubToTime);
    scrubberHandle.draggable({
        axis: 'x',
        containment: "parent",
        drag: function(event, ui) {

            scrubberValue = ($(this).position().left - timelineScrollValueLeft) / ZoomValue;
            scrubberHandle.css("left", $(this).position().left);
            progress.html(scrubberValue / 1000);
            mainTL.time(scrubberValue / 1000).pause();
            insertTime = scrubberValue * ZoomValue;
        }
    });
}

Is there a better method that will perform faster using GreenSock? I haven't ever worked with Canvas, so it isn't my first choice, but it seems like it may be a better solution.

Link to comment
Share on other sites

Hi ajhalls :)

 

That's a pretty cool project you've got going there.  8-)

 

I think a good rule of thumb is 'x' is better than 'left'. That being said, I thought it was pretty smooth the way you have it.

 

Canvas is certainly able to move a lot of little elements while hardly breaking a sweat. Have you tried it with canvas just to see if you like it better? If not, I'd say go for it. Maybe you'll love it.

 

That's my little two cents worth.

 

Happy tweening.

:)

Link to comment
Share on other sites

Thanks guys, I did play a little with the canvas idea and was getting blurry lines which made me google fuzzy text which led me to this:

https://www.html5rocks.com/en/tutorials/canvas/hidpi/

 

It seems as Craig mentioned that it should be potentially better for all the small items, where maybe instead of adding each individual span and positioning it, I just have a single item for the black lines like this:

context.fillText("| | | | | | | | | | | | | | | | | | | | | | | | | | | | ", -150, 0);

Then I could have a single one for all the red lines, and one for the numbers and then only am scaling 3 items instead of 600.

 

I haven't spent hardly any time on the canvas idea, I was hoping someone had a genius idea to share before getting too far into it since everything already worked with this version, it was just slower  :)

Link to comment
Share on other sites

I stumbled across a cool CSS ruler yesterday that only needed minor modifications to be zoomable. I was able to zoom 20 simultaneously without any lag :)

 

See the Pen PpeVmE by ajhalls (@ajhalls) on CodePen

 

Other rulers that also had interesting potential:

See the Pen wBVVVN by j4n (@j4n) on CodePen

 

See the Pen grQKEK by pbweb (@pbweb) on CodePen

 

http://jsfiddle.net/thirdender/kwcug/

 

See the Pen wBVVVN by j4n (@j4n) on CodePen

Link to comment
Share on other sites

Hey Dr. Halls

 

Ideally, zoom should work like this graphing calculator. If you search around, there's a bunch of algorithms to calculate something like that, only drawing what's visible with dynamic units.

https://www.desmos.com/calculator

 

The easiest way to clear up canvas fuzziness is to scale the canvas context. Here's a demo where I do that, and draw a grid with major and minor lines. It should look pretty sharp on a screen with a high resolution.

 

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

.

  • 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.
×
×
  • Create New...