Layer manipulation & animations

[mifi]

Being able to manipulate all layers separately. Ideas:

• Set layer x, y, width, height
• Opacity
• Camera "Shake" effect
• Keyframe animation with different easings (Already have a simple keyframe impl here)
  • Fade in/out layers
  • zoom in out on layer level instead of the current ken burns
• Custom animation callback function for each layer's Image object
• fabric.js filters

Have created a branch for this.

[devsontech]

I am testing with gsap, it's promissing.

[mifi]

Cool. Can you share what you're testing?

[devsontech]

Cool. Can you share what you're testing?

Hey @mifi sorry I was busy with other projects and didn't get time for working on this. But below is the example how I used gsap. We can use motion tween to transform any property.

const editly = require('..');
const gsap = require('gsap');
const { MotionPathPlugin } = require("gsap/dist/MotionPathPlugin");
//const MorphSVGPlugin = require('gsap/all');
//const PIXI = require('pixi.js');
//import { gsap } from "gsap"
//import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"
//import * as PIXI from "pixi.js"

async function func({ width, height, duration, canvas, params }) {
    async function onRender(progress) {
        console.log(canvas, params, duration + " duration");
    const context = canvas.getContext('2d');
    //const centerX = ;
        //const centerY = ;
        //gsap.TweenLite
        var aniObj = { radius: 40, lineWidth: 5, centerX: canvas.width / 2, centerY: canvas.height / 2, fillStyle: 'hsla(350, 100%, 37%,1)'};
        const tl = gsap.TweenLite.fromTo(aniObj, { radius: 40, lineWidth: 5, centerX: canvas.width / 2, centerY: canvas.height / 2, fillStyle: 'hsla(350, 100%, 37%,1)' }, { radius: 80, lineWidth: 100, centerX: canvas.width / 4, centerY: canvas.height / 4,  fillStyle: 'hsla(50, 50%, 100%,1)', duration: duration, ease: "bounce" });
        tl.progress(progress);
        const radius = aniObj.radius;;
        //console.log(gsap);
        console.log(aniObj);
        
    context.beginPath();
        context.arc(aniObj.centerX, aniObj.centerY, radius, 0, 2 * Math.PI, false);
    //context.fillStyle = 'hsl(350, 100%, 37%)';
        context.fillStyle = aniObj.fillStyle;
        context.fill();
        context.lineWidth = aniObj.lineWidth;
    context.strokeStyle = '#ffffff';
    context.stroke();
  }

  function onClose() {
    // Cleanup if you initialized anything
  }

  return { onRender, onClose };
}

editly({
    height: 1080,
    width:1920,
  // fast: true,
  outPath: './customCanvas.mp4',
  //outPath: './customCanvas1.gif',
  clips: [
    { duration: 5,
      layers: [
        { type: 'rainbow-colors' },
        { type: 'canvas', func },
          ]
      },
      {
          duration: 5,
      layers: [
        { type: 'rainbow-colors' },
          { type: 'canvas', func },
          { type: 'title', text:'Test Text' }
      ] },
  ],
}).catch(console.error);

[khanzzirfan]

@devsontech devsontech wonder how did you go? you had successes testing Gsap and Pixi and Editly together? Would like to see if you have an example.

[devsontech]

@devsontech devsontech wonder how did you go? you had successes testing Gsap and Pixi and Editly together? Would like to see if you have an example.

@khanzzirfan there is example above you comment.