Jump to content
GreenSock

pinkdobie

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

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×