Build the "Grow" animation

[saadfarooq2022]

As I want to add the dotted lines or blocks around the image block. How can I add these dotted lines to it which are increase or decrease with the slider.

[dm-siegel]

Is the size of the dotted line tied to an attribute/trait? Maybe I am not understanding the problem, but from what you described, you can listen for a property change in your component model, and modify the view to add the dotted lines around your image. The view does not get exported to html, only the model. Something like this could work?

view: {
      init({ el, model }) {
        // Do something in view on model property change
        this.listenTo(model, 'change:attributes', this.render);
      },
      onRender({ el, model }) {

// do your dotted line box stuff here
          el.innerHTML =
            '<div style="width:100%; border: 2px solid red; text-align: center; padding: 5px;">Please Select A Snippet</div>';
      },
    },