Tween slide in and out animation only works once.

[Daniel Park]

openContactAside = () => {
  this.setState({ asideOpen: true }, () => {
    TweenMax.to(this.overlayEl, 0.5, { x: '0' }, { ease: Cubic.easeIn, yoyo: true });
  });
};

closeContactAside = () => {
  TweenMax.to(this.overlayEl, 0.5, { x: '100%' }, { ease: Cubic.easeIn, yoyo: true });
};

 

I have these two functions. When a button is clicked, the overlay element (this.overlayEl) animates from an initial position set by CSS of 

.overlay {
  transform: translate3d(100%, 0, 0);
}

 

The animation works as desired the first time the button is clicked to open the overlay. The overlay slides out and populates the full width and height of the viewport as desired.

 

The animation to slide the overlay back to its original position works the first time its clicked. The user presses the close button and it slides back to its original position as it should.

 

However, once both the open and close animations have fired once, I try to open the overlay again but nothing happens. 

I've inspected the dom and its stuck at 

<div className="overlay" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);" />

 

I don't see the translate property being animated back to 0% again. It's as if its stuck there. Am I completely missing how TweenMax's to/from methods work? Is there something I have to do to reset or set the positions of an element that's been animated for it to work properly?

[GreenSock]

Short answer: use xPercent:100 instead of x:"100%". And xPercent:0 instead of x:'0'  too. 

 

Longer explanation: GSAP supports BOTH percentage-based translations (xPercent and yPercent) AND pixel-based ones (x and y) simultaneously (you can combine them for very useful effects). The browser always reports the computed (current) style transform as a matrix() or matrix3d() with all the percentage-based stuff baked into the raw pixel values, so it's impossible for GSAP to discern that you intended the original CSS to be 100%. That's one of the reasons GSAP has xPercent and yPercent, and it's also why we recommend that folks set transform-related values directly via GSAP whenever possible (because it's faster, more accurate, and eliminates potential confusion with interpolating values compared to CSS).

 

When GSAP gets a %-based value in the "x" or "y", as a convenience it'll just act as if you meant xPercent/yPercent (again as a convenience - the proper way is to define it as xPercent or yPercent). It is actually working the same every time for you but it seems like it's not because after the first tween, xPercent is already at 100. In your openContactAside() method, you're animating to x:"0" which is NOT percent-based, so it does the regular pixel-based translateX. Then in closeContactAside(), you're tweening to x:"100%" (which gets interpreted as xPercent:100) but it's ALREADY at xPercent:100. 

 

Make more sense now? 

 

Side note: I noticed you had yoyo:true set on your tweens, but that won't do anything unless you set repeat to at least 1. No big deal - just wanted to point that out in case you were confused as to why it wasn't yoyo-ing. 

[Daniel Park]

Ahhh, interesting. Some oversight on my part!

 

I simply changed the 0 to '0%' and it works as it should.

Interestingly enough though, when I use xPercent the Tween doesn't work.

 

openContactAside = () => {
  this.setState({ asideOpen: true }, () => {
    TweenMax.to(this.overlayEl, 0.5, { xPercent: 0 }, { ease: Cubic.easeIn, yoyo: true });
  });
};

closeContactAside = () => {
  TweenMax.to(this.overlayEl, 0.5, { xPercent: 100 }, { ease: Cubic.easeIn, yoyo: true });
};

 

However when I use the %-based string value of '0%' everything works fine.

 

Thanks for the detailed answer! 

[GreenSock]

Hmmm...what version of GSAP are you using? Got a demo that shows xPercent not working? Maybe a codepen? I’m super curious.

[GreenSock]

Oh! I just noticed a problem. You had the wrong parameters for a to() call. It should only have 3. 

[Daniel Park]

You're right. Had an extra object and the ease function wasn't working either. All is working as it should be!!