I am thinking this is from the structure of your code. Try something along these lines. I found it easier to control this way in my projects.
Basically the idea is to have one function create the animation and popualte the Timeline and another controller the playing of said Timeline.
<a class="menuIcon" (click)="menuClick()">
<svg class="hamburger" width="26.892" height="17.285" viewBox="0 0 26.892 17.285">
<g id="MenuI" data-name="Group 1" transform="translate(0 1.5)">
<line id="topLine" data-name="Line 1" x2="26.892" fill="none" stroke="#000" stroke-width="3"/>
<line id="midLine" data-name="Line 1" x2="26.892" transform="translate(0 7.142)" fill="none" stroke="#000" stroke-width="3"/>
<line id="botLine" data-name="Line 1" x2="26.892" transform="translate(0 14.285)" fill="none" stroke="#000" stroke-width="3"/>
</g>
</svg>
</a>
import { Component, OnInit } from '@angular/core';
import { TimelineMax } from 'gsap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
const menu = new TimelineMax({paused:true, reversed:true});
ngOnInit(){
this.createMenuAnim()
}
createMenuAnim(){
menu.to("#topLine", .5, {rotation:'30', ease:"Expo.easeInOut"},0)
menu.to("#midLine", .5, {opacity:'0', ease:"Expo.easeInOut"},0)
menu.to("#botLine", .5, {rotation:'-30', ease:"Expo.easeInOut"},0)
}
menuClick() {
this.menu.reversed() ? this.menu.play() : this.menu.reverse();
return console.log('clicked');
}
}