Open a link after tweening

[JobV]

Hi,

 

I've been trying to make a interactive menu. But now that i got the menu working the last tween wil not be played. 
I would like to see that when the click function is done automatically opens a link to index.html
 

Thanks!

See the Pen xPqrKE by JobVoskes (@JobVoskes) on CodePen

[Sahil]

You can use event.preventDefault() to prevent link being clicked. Then use onComplete callback to go to that link.

 

$(".button").click(function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  TweenMax.staggerTo(".button", 0.5, {opacity:0, y:-100, ease:Back.easeIn,
                                      onComplete: function(){
                                        window.location.href = url;                                           
                                      }

                                     }, 0.1);
});

 

 

See the Pen WXpOQm?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[JobV]

Tanks!

[oabartist]

On 11/10/2017 at 10:18 AM, Sahil said:

Hello! I'm newbie in java script, I have a problem apply this tutorial, I try to make it in Visual Studio, it turns out that I do the same of animating the navigation links and clicking on each link of "home" About Us "" Work "and" contact "and the animation works. But I get clicked appears an error : Cannot GET /.../ undefined. I don't know where that error is. If you can help me, thank you.

 

[GreenSock]

It sounds like you're just passing an invalid URL in your onComplete to the window.location.href. In other words, your "url" parameter that's getting pulled from $(this).attr("href") is undefined. It's difficult to say for sure because you didn't provide a minimal demo, but this looks like just a JavaScript problem, nothing related to GSAP. 

[oabartist]

Hello, thank you for your quick reply. I understand that I have an error in the JavaScript. I need to practice on that. I will make my own example and show it. I have not been used to writing the code. I will make an effort. Thanks once again.

[oabartist]

Ok, Solved!

I was able to fix the JavaScript problem. I just replaced the part of "$ (this)" with this code "$ ('a', this) .last ()" in the attribute  'Href' .  Thanks a lot for the suggestion.

To check my Minimal Demo is:   

See the Pen MWbPvGq by oabart (@oabart) on CodePen