Ok. This one is killing me. I've spent two days on it already. I think I just need to know more about nested timelines and labels. But here it is:
-When the mouse pointer enters the "Hover Button" I'd like the playhead to play until 50% of the animation has completed, then stop.
-If the mouse pointer leaves the "Hover Button" before the playhead reaches 50%, then the playhead should reverse, heading back towards the start of the timeline.
-If the mouse pointer leaves the "Hover Button" after the playhead has reached 50%, the the playhead should reverse back to the 50% position, NOT all the way back to the start of the timeline.
This much so far I've got, although I used two separate timelines back to back with a number of "if" statements using the progress() method to accomplish this. I'm sure there is a more elegant solution using only one timeline, I just can't seem to find it at the moment. The problems come when the timeline reaches 100%.
-After the playhead reaches 100%, I need everything to reset back to it's initial state on load. So, in other words, after the playhead reaches 100%, it should snap back to the very start of the timeline and all of the above described behavior should repeat itself all over again. This is whats giving me trouble.
I have tried using pause(0), seek(0), time(0). None of those seem to be resetting things without adding extra unwanted stuff to the hover behavior.
By the way, when I say timeline here I am referring to the red line on the codepen demo. Not either of the two separate back to back timelines I used to get what I've got so far. Any ideas? This one is frying my brain. Lol. Thanks for any help!
Here is the codepen: