I have an animation with transparent background and a HTML canvas.
Before an object is added to the canvas the animation should be played.
The animation source is a Flash file, there is also an HTML/JS (CreateJS) export and an animated GIF available.
The canvas uses Fabric.js running inside a React application.
My question is the following:
What is the recommended way to implement the animation in the described use case?
At the moment my best approach would be trying to integrate the CreateJS export into the React application and "overlay" the Fabric.JS canvas with the CreateJS canvas while playing the animation. This solution could work and sounds complicated and bloated to me, since I would integrate another canvas library (CreateJS besides Fabric.js) and both need to be synchronized in terms of timing / playing the animation correctly.
Here is a similar unanswered question Animated GIF on Fabric.js Canvas
I know only one way to add images with fabric.js. First you load your images when the page is loading then you display them on the canvas. But for what I have experienced fabric.js set a lot of feature on every element so it become hard to load if you want to display some thousand of images together.
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);