Dynamic values with nested timelines and animations only playing once on click

[pinkdobie]

Hi there!

 

Just working on something for a calming app. I want the user to be able to choose how many breaths they'd like to take, then be walked through an animation that symbolizes each breath. After the animation is finished it should fade off the screen and go back to the section where they can choose how many breaths they'd like to take, starting the page over again essentially.

 

The button that the user clicks is the value that my breatheAnimation will use to repeat. Right now I'm running each timeline separately when the button is clicked, leaving me to need a 4 second delay on my breatheAnimation (not ideal). I was previously attempting to do some kind of onComplete(), isActive stuff, buuut I didn't really know how to go about it with each timeline. Nesting the animations in functions also proved tricky as I wasn't able to use my updated breatheSelect value, it only took the 0 that the breatheSelect value is upon page load.

 

Right now I have the animationRestart timeline commented out as it will simply run as soon as the button is clicked, even when it does run I can't actually start all of the animations again by clicking one of my options. I'm assuming this means I need to reset my timelines back to paused, but I'm not really sure.

 

Thankful for the help in advance! Hope I've provided enough details.

See the Pen eYVgxRo by danajcarroll (@danajcarroll) on CodePen

[mvaneijgen]

I've set it up so that the animation `.restart()` so that it will always play from 0 instead of `.play()` . And when your `breatheAnimation` is finished I call `animationRestart` onComplete. 

 

See the Pen bGLqbdr?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[pinkdobie]

This works great! Thanks so much mvaneijgen! I didn't think to restart the animation, I'll have to remember that for next time.