Angular+gsap3 animation not working when clicked upon

Question

app.component.html

<div #animate class="main">

    <div id="go" (click)="click()" class="box1"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

app.component .ts

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { gsap, Back, Bounce, Elastic } from 'gsap'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  ngOnInit() {
    this.animation();
    
  }


  click(): void {
    gsap.to(".box1", 3, { x: 200,background:"red", ease: Elastic.easeOut, paused: true })
    
  }

  animation() {
    gsap.to(".main .box", 3, { x: 200, stagger: 0.3, ease: Bounce.easeOut })
  }

}

When box1 is clicked the animation is not working, the other animations are working fine.Even i checked the console the click() is working and it shows the animations but the effect is not taking place

Answer 1

I removed the

paused: true

and when clicked upon the animation started working thanks to anyone who tried for the above

    gsap.to(".box1", 3, { x: 200,background:"red", ease: Elastic.easeOut }) }

this code works...