"Split Hover Reverse" behavior and Timeline reset issue.

[wcomp]

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: 

See the Pen JwzbWV by Wcomp (@Wcomp) on CodePen

 

See the Pen JwzbWV by Wcomp (@Wcomp) on CodePen

[wcomp]

Figured it out!!!: 

See the Pen wRZzQv?editors=1010 by Wcomp (@Wcomp) on CodePen

 

[Carl]

Excellent! I was just about to take a stab. Very glad you found a solution with 1 timeline. Definitely the way to go.

[wcomp]

5 hours ago, Carl said:

Excellent! I was just about to take a stab. Very glad you found a solution with 1 timeline. Definitely the way to go.

Hey! I do have another question though. Is there anyway to round the progress or time values that are returned by the progress() and time() methods? The hover behavior is dependent on the accuracy of those values. I noticed that when I increased the speed of the animation, say to .4 seconds total, the progress values don't always register as being exactly .5 or 1 when they ought to in the sequence. Check this out: 

See the Pen JwVvNy?editors=0101 by Wcomp (@Wcomp) on CodePen

The console logs 0.49999999999999983 when it should be right on 0.5. This prevents the hover animation from behaving like it should. I fixed it by changing progress() to time() but even then I had to add >= .6 because the console is logging 0.6000000000000002 instead of right on 0.6.  Like this: 

See the Pen KbYeNW?editors=1011 by Wcomp (@Wcomp) on CodePen

Is there any way to round the precision of the progress() and or time() methods so that they fall where they should? Also which do you think would be better suited for this task, progress() or time()? Thanks!

[GreenSock]

Yeah, I definitely wouldn't recommend writing your code so that it depends on exact values like that because you're bound to run into issues with the way computers do math. Plus, keep in mind that GSAP is totally time resolution-independent, meaning it updates anywhere, anytime and renders things at precisely that time. The browser's refresh rate is very unlikely to land EXACTLY on a specific whole value time in your timeline. 

 

I didn't quite understand why you needed the 0.3 value in the conditional logic (or a progress of 0.5). Aren't you just trying to figure out if the current time falls between certain ranges anyway? 

 

I took a stab at rewriting things in a much more streamlined way: 

See the Pen 0585a7d1c3bdb46ba3c5ac28fa29b8bf by GreenSock (@GreenSock) on CodePen

 

Does that help? I'm not exactly sure if that's the behavior you wanted, so let me know if there's something else you were looking for. 

 

Thanks for being a Club GreenSock member!

 

 

[wcomp]

36 minutes ago, GreenSock said:

Yeah, I definitely wouldn't recommend writing your code so that it depends on exact values like that because you're bound to run into issues with the way computers do math. Plus, keep in mind that GSAP is totally time resolution-independent, meaning it updates anywhere, anytime and renders things at precisely that time. The browser's refresh rate is very unlikely to land EXACTLY on a specific whole value time in your timeline. 

 

I didn't quite understand why you needed the 0.3 value in the conditional logic (or a progress of 0.5). Aren't you just trying to figure out if the current time falls between certain ranges anyway? 

 

I took a stab at rewriting things in a much more streamlined way: 

See the Pen 0585a7d1c3bdb46ba3c5ac28fa29b8bf by GreenSock (@GreenSock) on CodePen

 

Does that help? I'm not exactly sure if that's the behavior you wanted, so let me know if there's something else you were looking for. 

 

Thanks for being a Club GreenSock member!

 

 

Yes! That's exactly it! I'm gonna need to study that code though. Thanks for your help!

[GreenSock]

8 hours ago, wcomp said:

Yes! That's exactly it! I'm gonna need to study that code though. Thanks for your help!

 

Glad it helped! Yeah, if you're looking to take your animation code to the next level, definitely check out this article if you haven't already: 

https://css-tricks.com/writing-smarter-animation-code/

 

Happy tweening!