CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvasfabricjs
Alexandr Senichev
Alexandr Senichev

Reputation: 23

Why elements beyond canvas don't animated (fabricjs)?

Fabricjs: I have some circles, beyond canvas layer (top: -300), they have coords, but when I do animate to the specified position they just appearing on screen in specified duration without any animation. Why they do like so and what is the way to implement this?

animateCircle(ind, co, shift = -300, ca) {
    co.animate('top', shift, {
        duration: 1000,
        onChange: ind !== null && ++ind === ca.length ? this.c.renderAll.bind(this.c): undefined,
        easing: fabric.util.ease[0]
    });
}

Upvotes: 2

Views: 162

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

If you are on latest fabricjs there is a parameter to skip drawing of offscreen objects. You have two ways to animate offscreen objects:

1) disable the skipOffscreen check setting skipOffscreen to false on the canvas, always or just for the animation duration.

2) during animation calculate obj.setCoords() for the animation object.

animateCircle(ind, co, shift = -300, ca) {
    co.animate('top', shift, {
        duration: 1000,
        onChange: ind !== null && ++ind === ca.length ? 
        function() {
          this.c.renderAll();
          co.setCoords();
        } : undefined,
        easing: fabric.util.ease[0]
    });
}

Upvotes: 3

Related Questions