HTML5 Canvas Complex Tweening Tutorial

Also you can use GreenSock Konva Plugin for tweens.

GreenSock tweens are more powerfull than Konva’s tween.

Also demo demonstrate tweening fillLinearGradientColorStops property with usual GreenSock usage.

Konva Complex Tweening Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <script src="https://rawgit.com/konvajs/greensock-plugin/master/KonvaPlugin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
    <script src="https://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Complex Tweening Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

      var star = new Konva.Star({
        x: 100,
        y: 250,
        numPoints: 5,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'red',
      });

      layer.add(star);
      stage.add(layer);

      var tl = new TimelineLite();

      // plugin example
      tl.to(star, 2, {
        konva: {
          x: 300,
          y: 130,
          innerRadius: 15,
          rotation: 360,
        },
        ease: Power4.easeOut,
      })
        .to(star, 2, {
          konva: {
            fill: 'rgb(0,0,255)',
            scaleX: 1.5,
            scaleY: 1.5,
          },
        })
        .to(star, 1, {
          konva: {
            fill: '#0F0',
            scaleX: 3,
            scaleY: 1,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowBlur: 10,
            shadowColor: 'black',
            rotation: 0,
          },
        });

      var linearGradPentagon = new Konva.RegularPolygon({
        x: 70,
        y: 70,
        sides: 5,
        radius: 70,
        fillLinearGradientStartPoint: {
          x: -50,
          y: -50,
        },
        fillLinearGradientEndPoint: {
          x: 50,
          y: 50,
        },
        fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
      });

      layer.add(linearGradPentagon);
      linearGradPentagon.moveToBottom();

      //activate ColorPropsPlugin
      TweenPlugin.activate([ColorPropsPlugin]);

      //object to store color values
      var tmpColors = {
        color0: 'white',
        color1: 'black',
      };

      //tween the color values in myObject
      TweenLite.to(tmpColors, 5, {
        colorProps: {
          color0: 'black',
          color1: 'red',
        },
        yoyo: true,
        repeat: 5,
        ease: Linear.easeNone,
        onUpdate: applyProps,
      });

      //apply new color values to gradient css of target
      function applyProps() {
        linearGradPentagon.setAttrs({
          fillLinearGradientColorStops: [
            0,
            tmpColors.color0,
            1,
            tmpColors.color1,
          ],
        });
      }
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.