Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alan0buchanan

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

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 5
Link to comment
Share on other sites

@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?

  • Like 1
Link to comment
Share on other sites

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.

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