Jump to content
Search Community

Need help. Handle urls the right way

meng test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey,

 

i'am new to Javascript and have a question how to handle a click event with url.

 

<nav>
  <div data-foo="target.html">Target</div>
</nav>



$(document).ready(function() {

var tl = new TimelineMax({
  onReverseComplete: function() {
    window.location = url;
  }
});

  tl.to("#overlay", 1, {top:"0", delay:0, ease:Power4.easeInOut},0);
  tl.to("#menu", 1, {opacity:"1", delay:0, ease:Power4.easeInOut},1);
  tl.play();


$("nav").on( "click", function() {
  url = $(this).data("foo");
  
  // used a data-value to store the anchor like index.html
  
  tl.reverse();
});
});

 

 

But how to do this with a correct a href and prevent Default ?

 

<nav>
  <a href="target.html">Target</a>
</nav>

 

Thank you very much.

 

Link to comment
Share on other sites

We generally try to keep these forums focused on GSAP-specific questions, but I'd suggest Googling event.preventDefault() - that's generally how you'd stop the default behavior of a click event. It'd be a lot easier if you had a codepen demo that we could quickly edit for you, so if you still need some help, please provide one of those. To learn how, see: 

 

Happy tweening!

  • Like 2
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.
×
×
  • Create New...