Jump to content

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

Need Help Converting jQuery Scroller to GSAP

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

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 comment
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) {

      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 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.