Hi, I am currently animating two timelines in React. One animation represents the right side of the section and the other animation, the left side. To give you a picture of what the initial state is kindly take a look at this:code pen. If I enter the left side, the left side will animate fully towards the right side and the left side image is revealed (we can still see, at the top right corner, a small triangle which would be the right image). When I exit the left side it will reverse to mid point. This behaviour is mirrored when hovering inside the right side. If I enter the right side, the right image will animate fully to the left and reveal the right image (the left image is reduced to a small triangle at the top left corner).
The start and reverse on each timeline is working perfectly well when entering and exiting each side. However I want to achieve something additional to what I already have in place. I need different behaviour, when entering each section from the adjacent one, because currently when I hover into an adjacent section it will abruptly go to the midpoint and after that animate fully. So for example if I am entering the right side from the left side, it will animate the right side from midpoint to far left which looks abrupt. What I want is a smooth continuation and transition from the left side reverse into the right side starting point until the end of the right animation.
I have tried multiple ways unsuccessfuly. At this point I'm not sure If I should use a new animation when coming from the adjacent animation but I think I should be able to work with the two animations already in place. I tried adding both timelines to a master timeline and then playing it, on the onMouseEnter function. I used the progress property to figure out if the cursor is coming from outside or if the adjacent part has progressed then the cursor must be entering from the adjacent part. So using this prop for example in the onMouseEnter for the right side, I coded, if(leftside.progress() * 100 !== 0) then do this:
master!.current!.add(ls!.current!).add(rs!.current!.tweenTo(1)).play();
because I wanted the aniamtion to pick up the left side wherever it is at this point but then the master timeline does not always start again. It would always complete but not necessarily start. Well and anyway I found this logically confusing to do because in my solution this master timeline never knows where to start from and anyway I do not want to have set initial values because either side might have not fully progressed when jumping into the adjacent section.
Not entirely sure how to achieve what I want.