Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
romain.gr

Reverse Callback : clearProps doesn't work

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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! :)

  • Like 2
Link to post
Share on other sites

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?

Link to post
Share on other sites

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?

Link to post
Share on other sites

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

f90f0bf7e3ec47cfac7bdbf7972a507c.png

 

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.

  • Like 3
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

:)

  • Like 3
Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites

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.

  • Like 2
Link to post
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.

×