Custom Property to Convert Current BPM to Milliseconds

Feature Requests
,
1

In order to really catch the attention of the other band members, I set up a CSS animation to make the background color blink, noticeably. However, the animation duration is set to a fixed amount.

Can you output a custom CSS property that converts the currently-playing tempo (BPM) to milliseconds (without the ‘ms’ suffix)?

This will allow us to animate many things based on the current tempo of the song.

Examples:

animation: looping-indicator var(--current-tempo)ms infinite normal;

animation: looping-indicator calc(var(--current-tempo) / 2)ms infinite normal;

Thank you for considering this!

2

Hey @Michael, that’s a great idea! I’ve added a few things to the AbleSet 3.0.0-beta.27 that hopefully help with this:

  • You now have a --beat-time property that contains the duration of each beat in seconds
  • There are now beat-even and beat-odd classes on the body you can use to create blinking animations that are exactly in-sync with the beat
  • On each beat, the body now has a beat class for a few milliseconds which you can use to build styles that blink on each beat

Let me know if this works for you :slight_smile:

3

Thank you very much! I tried the --beat-time property and it is exactly what I was looking for. After our weekend show, I’ll take a deeper look at the two classes you added.

Also, thank you for the additional track-group classes!

Mike

1 Like