Need Help Converting jQuery Scroller to GSAP

[stíobhart]

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

[Shaun Gorneau]

I'd have a look at the ScrollTo Plugin - https://greensock.com/ScrollToPlugin

[Shaun Gorneau]

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);
      }
    }
  });  
});