Jump to content
GreenSock

bobbie

Two timelines not transitioning smoothly when entering one animation from the other

Recommended Posts

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.

See the Pen by s (@s) on CodePen

Link to comment
Share on other sites

Welcome to the forums @bobbie

 

Can you provide a minimal demo of the issue? You don't need to include all that React code. Thanks!

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

39 minutes ago, bobbie said:

There is a sudden jolt when crossing from one hover area to the next and I would like this to be seamless.

 

Yes, it's generally not a good idea to reuse an animation that might be competing with another animation. The left timeline doesn't know you are changing stuff in the right timeline.

 

Also, I'm not sure what these from statements are for.

.from(logoRef.current, { transform: "none" }, "<")

 

It's best to always use GSAP transform properties like x, y, scale, etc instead of transform. If you need to remove one, you can just use a set.

.set(logoRef.current, { scale: 1 }, "<")

 

I would suggest reworking your animation into a single animation, kind of like this.

 

See the Pen wvPQmWq by GreenSock (@GreenSock) on CodePen

 

If some of the stuff isn't easy to control inside a single timeline, you can also make a timeline that does the progress and whatever else you want.

 

gsap.timeline()
  .to(animation, {
    overwrite: true,
    progress: 0.5
  })
	.to(myLogo, { ... }, 0)

 

Outside of that, the best way to handle competing animations is to just not use them and create your animations on the fly, like in the mouseenter/mouseleave events.

 

Link to comment
Share on other sites

Putting it in one timeline seems to be much simpler especially since both my animations are animating the same elements. Thanks for that!

  • Like 1
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.
×