Using glide button or Boolean as play/pause for css animation

Ask for Help
1

I’m looking for a way to have my text scroll when users press a play button. I would also like them to control the speed of scroll. (this is for a music chord app. So it would be helpful if users can press play so they don’t have to constantly scroll while playing an instrument.)

How To Play And Pause CSS Animations With CSS Custom Properties | CSS-Tricks I found this solution, but the toggle switches don’t show up in the html. I’m wondering if it would be possible to make a glide checkbox or boolean to play/pause the animation. Any help would be greatly appreciated.

I’m a css and code newbie

2

I would suggest looking into the AI component.

Give it the text as an input, tell it to display it and scroll, but give you a control panel on the speed, and a play/pause button block.

Those things might write values into the component’s variables, not necessarily a variable in your data.

3

Oh my goodness!! I can’t believe that feature was sitting right there all this time!

Thank you SOOOO much!!!

4

Does it work for you? This is pretty recently, so try to play with it and let us know if it works.

5

yes! I just put in the prompt and it created the play button with speed control and everything

6

That’s sweet!