addlabel Making the animation complete in 20% of the last animation in the timeline

[BhanuSingh]

I have this animation, where I am having a hard time making a particular animation complete in almost 20% or start of a particular label.

 

    const zoomData = [
        {scale: 1, origin: [0.5, 0.5] },
        {scale: 18, origin: [0.685, 0.38], 
          steps: [
            {
              type : 'in',
              el : '.location_1',
            },
            {
              type : 'out',
              el : '#text',
            },
            {
              type : 'out',
              el : '.location_wrapper .section-title',
            },
            {
              type : 'out',
              el : '.location_wrapper .andaman-key',
            },
            {
              type : 'in',
              el : '#htxt',
            },
          ],
        label : 'empty'
        },
        {scale: 1, origin: [0.5, 0.5], steps: [
          {
            type : 'out',
            el : '.location_1',
          },
          {
            type : 'out',
            el : '#htxt',
          },
        ],
        label : 'havelock'
      },
        {scale: 18, origin: [0.500, 0.78], steps: [
          {
            type : 'in',
            el : '.location_2',
          },
          {
            type : 'in',
            el : 'svg #ctxt',
          },
        ],
        label : 'chidiyatapu'
      },
      ];

I have this object which is responsible for setting up the animation. It is used by the following Js to add it to the timeline.

zoomData.slice(1).forEach(data => {
        if(data.steps) {

            tl.zoom(".location_island", {
                scale: data.scale,
                origin: data.origin,
                ease: "power1.inOut"
              });

              tl.addLabel( data.label , "<");

              data.steps.forEach( step => {
                if(step.type == 'out') {
                  tl.fromTo(step.el,
                    {
                      autoAlpha: 1,
                      display: 'block',
                    },
                    {
                        autoAlpha: 0,
                        display: 'none',
                        ease: "power1.inOut"
                    },
                    data.label
                    )
                } 
                if(step.type == 'in') {
                  tl.fromTo(step.el,
                    {
                        autoAlpha: 0,
                        display: 'none',
                    },
                    {
                      autoAlpha: 1,
                      display: 'block',
                      ease: "power1.inOut"
                    },
                    data.label + "+=20%"
                    )
                }
              })
        }
        else {
            tl.zoom(".location_island", {
                scale: data.scale,
                origin: data.origin,
                ease: "power1.inOut"
              })
        }
      });
 });

How can I make the text, Our Centers, Andaman Island and `#text` fade away when I am first time zooming inside. 

See the Pen yLbVMzX by bhanusinghR (@bhanusinghR) on CodePen

[BhanuSingh]

I was able to resolve if by adding duration.

    zoomData.slice(1).forEach(data => {
        if(data.steps) {

            tl.zoom(".location_island", {
                scale: data.scale,
                origin: data.origin,
                ease: "power1.inOut",
              });

              tl.addLabel( data.label , "<");

              data.steps.forEach( step => {
                if(step.type == 'out') {
                  tl.fromTo(step.el,
                    {
                      autoAlpha: 1,
                      display: 'block',
                    },
                    {
                        autoAlpha: 0,
                        display: 'none',
                        ease: "power1.inOut",
                        duration: 0.2,
                    },
                    data.label + "-=10%"
                    )
                } 
                if(step.type == 'in') {
                  tl.fromTo(step.el,
                    {
                        autoAlpha: 0,
                        display: 'none',
                    },
                    {
                      autoAlpha: 1,
                      display: 'block',
                      ease: "power1.inOut"
                    },
                    data.label + "+=20%"
                    )
                }
              })
        }
        else {
            tl.zoom(".location_island", {
                scale: data.scale,
                origin: data.origin,
                ease: "power1.inOut"
              })
        }
      });
 });