Jump to content


  • Posts

  • Joined

  • Last visited

bobbie's Achievements

  1. Putting it in one timeline seems to be much simpler especially since both my animations are animating the same elements. Thanks for that!
  2. Sure! here is the forked pen: https://codesandbox.io/s/mystifying-pine-dywhbm So I basically want a smooth transtion when I go from left to right or vice versa. I'm not sure how to go about this part of my animation. Currently both animations are playing and reversing as expected when entering them from outside the animated section. However if I hover into, for example the right area, from the left area then the animation is not smooth because it is starting from the right's mid-point (as expected) even thought the left would have not fully reversed. There is a sudden jolt when crossing from one hover area to the next and I would like this to be seamless. I'm using the progress prop to indicate whether the cursor is coming from outside the animated section or whether its coming from the adjacent section.
  3. 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.