this.menuTimeLine = gsap.timeline({
paused: true,
});
this.menuTimeLine
.fromTo(this.ref.menu, {
x: "-100%",
}, {
x: "0%",
duration: this.state.open ? 0.3 : 2,
ease: this.state.open ? "linear" : "expo.out",
}, 0).reverse()
if (this.menuTimeLine.reversed()) {
this.menuTimeLine.play()
} else {
this.menuTimeLine.reverse()
}
Button.addEventListener('click', () => {
if (this.menuTimeLine.reversed()) {
this.menuTimeLine.play();
} else {
this.menuTimeLine.reverse()
}
})
Update Prop or Tween value conditionally whatever it is normal gsap or gsap timeline
In Gsap version 2.x.x updateTo can update tweening values or gsap props but what to do in gsap 3.x.x
or Gsap vars can help in this issue ?
in Codepen example dynamic ease or duration ?
besause timeline is outside of onClick ?