Best practice of toggling the position of an element whose initial position is set by `TweenLite.set`

[alan0buchanan]

The example Codepen shows a text input whose label changes position depending on the input's `blur` and `focus` state.

Given `TweenLite.set()` is used to initialise the position of my label element, what is the best way to get back to this position without repeating code?

In my example, this is what I am currently doing; firstly, setting the coords of the label's initial position:
 

const initCoords = { y: 62, x: 10 };

Then initialising the position using the coords:
 

const initLabelPosition = () => TweenLite.set($label, { ...initCoords });

 

Then, when I need to toggle back I am again inserting the `initCoords` into a `TweenLite.to()`:
 

const moveLabelInsideInput = () =>
  TweenLite.to($label, animationDuration, {
    ...initCoords,
    fontSize: labelFontSizes.blur,
    ease
  });

 

I think I might be missing an easier way to do this. Is there a better way I can toggle back to the initial position created by `TweenLite.set()`?

See the Pen gxdJog by alanbuchanan (@alanbuchanan) on CodePen

[Jonathan]

Hello @alan0buchanan and Welcome to the GreenSock Forum!

 

You can create a new timeline in a paused state. Then just simply play() on focus and reverse() on blur.

 

See the below example :

 

See the Pen xLyqrY by jonathan (@jonathan) on CodePen

 

Happy Tweening!

[alan0buchanan]

@Jonathan that is actually awesome. The only issue now is that it looks like the ease is also reversed. Is there a way to get around it so that the ease is always the same?

[Carl]

If you want different eases for each direction of the animation I think the best solution is what you had initially: create unique tweens for each direction.

 

When an animation is reversed GSAP honors the ease that you set for that animation. 

If playing forward your animation starts fast and ends slow, in reverse it will start slow and end fast.

 

What you are suggesting is that one animation would have 2 eases: one for playing forward and one for playing in reverse. 

We recently added this for TweenMax tweens that repeat and have yoyo set to true.

See video here: https://greensock.com/1-20-0 and

See the Pen 9ba2df2067b39ecd19e99742decf0130?editors=0010 by GreenSock (@GreenSock) on CodePen

.

 

However, in your case since your animation is driven by user interaction which i don't think it is going to work well in your case. yoyoEase is great for animations that run on their own (repeating TweenMax tweens) as the engine knows exactly when to swap in the new ease – at the exact end of an iteration. In your example the user can click many times WHILE an animation is playing and if you swap eases at that point, the animation will jump and look bad.