how to stop endless animation

[g4rfiEld]

Hi, there are already a lot of similar questions, but unfortunately I could not find the answer I needed

The problem is that I can't stop the music animation when a button is pressed. If the user wanted to turn off the music, then when clicked the music animation should disappear and a line should appear, but that doesn't work, instead the music animation still plays even when turned off

I studied this example, but it didn't work out very well for me: 

Here is my demo: https://stackblitz.com/edit/vitejs-vite-zocssu?file=src%2FApp.jsx

Thanks for the help!

[Cassie]

Hi there!

 

So if I were you I would store the timeline somewhere where you can access it in a click function, then use control methods to control the timeline

 

Here's a simple example without React

See the Pen GRaQwpZ?editors=1011 by GreenSock (@GreenSock) on CodePen

This is a good demo showing this pattern in React -

See the Pen eYWGeGe by GreenSock (@GreenSock) on CodePen

 

And a section of the GSAP docs
https://gsap.com/resources/react-basics/#creating-and-controlling-timelines

 

[g4rfiEld]

1 hour ago, Cassie said:

Всем привет!

 

Итак, на вашем месте я бы сохранил временную шкалу где-нибудь, где вы можете получить к ней доступ с помощью функции щелчка, а затем использовал бы методы управления для управления временной шкалой.

 

Вот простой пример без React

 

Это хорошая демонстрация, показывающая этот шаблон в React.

 

 

 

 

 

 

 

И раздел документации GSAP
https://gsap.com/resources/react-basics/#creating-and-controlling-timelines .

 

Thank you)