Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
stíobhart

Need Help Converting jQuery Scroller to GSAP

Recommended Posts

Hi all.

 

Complete newbie to GSAP here. i'm looking forward to getting to grips with it to add some animation to a site I'm currently redesigning.

 

At the minute though there's one legacy script on the site, which relies on jQuery. It's just a wee utility script which will animate scrolling to any element on a page with an ID attribute set. [see the Codepen]

 

I want to "translate" this to GSAP instead, as it seems daft loading jQuery as well as GSAP, just for this one feature. However my JavaScript Fu is a bit rusty and I'm not having much luck working out how to GSAP-ise my selector.

 

The function is supposed to be triggered when a link is clicked with an href of `#someID` but not for an href of `#`.  GSAP doesn't seem to like the `:not` selector... or my attempts to adapt the syntax are wrong.

 

Here's the jQuery version:

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {

// do stuff

});
});

Could anyone give me a few hints?

 

See the Pen PNmwyK by stiobhart (@stiobhart) on CodePen

Link to post
Share on other sites

I wouldn't necessarily abandon jQuery altogether since it's non-animating tools are very useful. Also, rather than worrying about the selector to omit "#" alone, you can just do a quick DOM query for the fragment id ... if it returns nothing, do nothing.

 

Sort of like

$(function() {
  $("a[href^='#']").click( function (e) {
    var id = $(this).attr("href");
    if ($(id).length > 0) {
      e.preventDefault();

      TweenLite.to(window, 2, {scrollTo:{y: $(id).offset().top }, ease:Power2.easeOut});

      if (window.history && window.history.pushState) {
        history.pushState("", document.title, id);
      }
    }
  });  
});
  • Like 3
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.

×