Reverse Callback : clearProps doesn't work

[romain.gr]

Hey,
 
I'm struggling with a callback and clearProps, I've tried few options (found here : https://greensock.com/forums/topic/7299-timelinemax-reverse-callback-problem/) and none of the solutions works, I'm probably missing something or I don't get it.

navAnim.reverse(-1).timeScale(1.2).eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"}));

Doesn't work

navAnim.eventCallback("onReverseComplete", navAnim.set(mainNav, {clearProps:"all"}))
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

function removeProps(){
	navAnim.set(mainNav, {clearProps:"all"});
}

navAnim.eventCallback("onReverseComplete", removeProps());
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

navAnim.set(mainNav, {clearProps:"all"});

Works but no animation (which is logic), so it's not that clearProps doesn't work but the callBack;

navAnim.tweenTo(0, {onComplete: navAnim.set(mainNav, {clearProps:"all"})});
navAnim.reverse(-1).timeScale(1.2);

Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function

function removeProps(){
	navAnim.set(mainNav, {clearProps:"all"});
}

navAnim.tweenTo(0, {onComplete: removeProps()});
navAnim.reverse(-1).timeScale(1.2);

Doesn't work : Uncaught TypeError: navAnim.tweenTo is not a function

TweenLite.delayedCall(navAnim.time(), navAnim.set(mainNav, {clearProps:"all"}));
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

function removeProps(){
	navAnim.set(mainNav, {clearProps:"all"});
}

TweenLite.delayedCall(navAnim.time(), removeProps());
navAnim.reverse(-1).timeScale(1.2);

Doesn't work

 

Thanks

[PointC]

Hi romain.gr 

 

We'd be happy to assist you, but it's difficult to give good advice without editable code. Could you please create a simple CodePen for us that demonstrates the problem and describe the desired behavior? Please see Carl's post about creating a demo:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.

[Jonathan]

Also one quick note when adding your function in the various GSAP methods. Dont include the () parenthesis as the callback function. When you add the parenthesis you are telling the JS parser to run that function immediately

 

But like PointC advised, a codepen demo is greatly appreciated to better help you!

 

 

Thanks!

[romain.gr]

Hi,

 

Thanks for the quick answers, 

 

Here is a simplified Codepen : 

 

 

See the Pen WRdpdE?editors=0010 by romaingranai (@romaingranai) on CodePen

 

http://s.codepen.io/romaingranai/debug/WRdpdE/bYMdyYBawOvr

 

 

Thanks

[Carl]

Thanks for the demo, it definitely helps us isolate the problem.

 

Each time you were calling

navAnim.set(mainNav, {clearProps:"all"});

You were actually adding the set() at the end of the navAnim timeline that would remove all the inline styles on the menu.

This means that every time you re-opened the menu, the animation would play all the way to the end and hit that set() that you added.

When the timeline got to the end after opening the inline styles would instantly be removed, thus forcing the menu to appear to close instantly.

 

You want to use TweenLite.set() which will clear the props in the same way but it will not be added to the timeline.

 

function removeProps(){
TweenLite.set(mainNav, {clearProps:"all"});
}


navAnim.eventCallback("onReverseComplete", removeProps);

Does that work for you?

[romain.gr]

Hi Carl,

 

Thanks, but it's partly solving the issue. Actually my problem is when I resize the window, let me explain you how to reproduce the issue :

 

- On Codepen

  - Before doing anything, make the viewport smaller (let's say half/half with the code part).

  - Then click on the "open nav" btn (only once, to open the navigation)

  - Make the viewport wider

  - And click again on the "open nav" btn 

 

You'll see the navigation going back to "translateX:-100%" NOT of it's current width but to -100% of the previous width. Now continue by clicking on the "open nav", and you'll see that the nav is broken. Well it sounds complicated but it's very clear if you try the pen. I thought that removing the css properties would fix the issue, but I made a mistake. 

 

Thanks anyway, if you have any ideas how to fix that? reset the timeline in some way?

[Carl]

Thanks, it really helps to have a description of the issue you are trying to solve.

 

For doing percentage-based translations you should use xPercent or yPercent as this tells GSAP to specifically set the transform:translate() value instead of using a matrix: 

 

 

setting xPercent:-100 shown below

 

For more about xPercent / yPercent please read: https://greensock.com/gsap-1-13-1

 

If you manage the translation through GSAP exclusively you don't even need to worry about the clearProps stuff at all. 

navAnim.fromTo(mainNav, .8, {xPercent:-100}, {xPercent:0, ease: Power4.easeInOut});

This demo should stand up to resizing before and after any open and close of nav: http://codepen.io/GreenSock/pen/JEMZzE?editors=0010

 

*note I removed the translateX(-100%) from the css as its best to handle it all with GSAP.

[OSUblake]

Alternate version starting out in reversed state.

See the Pen vgpaya?editors=0010 by osublake (@osublake) on CodePen

[romain.gr]

Hi, 

 

I would prefer not use "fromTo" but rather "to", with keeping the css as it was (simply because it flashes when setting css rules in javascript). I can't manage to make it works, I still don't know what I'm missing, I'm now using xPercent with to  : 

 

See the Pen WRdpdE?editors=1010 by romaingranai (@romaingranai) on CodePen

 

Thank you

[PointC]

Did you look at Blake's alternate version in Post #8? He's using a to() tween and starting in a reversed state.

 

Regarding a quick flash of content: you can set any content to hidden and/or opacity:0 in your CSS and then right before animating it, you set() the autoAlpha to 1 in your JavaScript.

TweenLite.set(yourElement, { autoAlpha: 1 });

Happy tweening.

[OSUblake]

Yup. I made sure to do the autoAlpha so you could see how to do it. Not only does it prevent FOUC, but it also sets your elements up for a nice entrance effect should you want one. Instead of seeing a big, blank page suddenly flash everything in your face on page load, you could smoothly transition stuff in as autoAlpha also controls the opacity of an element.

[romain.gr]

Hi All,

 

Finally fixed it,

 

See the Pen WRdpdE by romaingranai (@romaingranai) on CodePen

 

Yep, finally that was my idea also, I'm hiding the nav in css, then set css propertie in .js. Thanks for all the info, was very helpfull and it helps me to dig a bit more into Gsap.