🤖 JS help: trigger css animation from event

I have a working breathing app prototype. As with other breathing apps out there, I have a working animation that scales up a circle for the inhale, and scales it down for the exhale all done entirely with CSS.

However, I’d love to implement sounds and other fun stuff to it which would only work with JS so I need help here as I’m not very familiar with JS. I want to trigger the scale up on an even, and the scale down on another (based on a timer that I would build with bubble).

How would you set this up? Thanks for the help guys!

It’s actually easier than I previously thought.

Triggering CSS animations on click, you need to change the element’s HTML ID to a class that has an animation. Turns out you can do this dynamically in Bubble using conditionals. You can set an HTML ID to be a state, so that when it’s inhale, have it change to the HTML ID “inhale”, and so forth.

For example:

The HTML:

#inhale {
	-webkit-animation: scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

The Css animation

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

Inside the HTML, you can pass dynamic data if your page is set as a type. Set the duration of the animation from there like this:

image
(time is expressed in seconds).

TIMERS:
I have 4 timers on my page, 4 custom triggers and 4 triggers for when the timer ends:

I basically set the timer of the “Inhale hold” action after the inhale trigger has gone off. Then the Exhale timer when the inhale-hold trigger has gone off, and so forth.

Notice that the timer’s time is set as the duration of the inhale (in miliseconds).

I use this free timer plugin to accomplish that:

Does this make sense?

This topic was automatically closed after 70 days. New replies are no longer allowed.