Animation is instant & I'm not sure why

[connorv 2 Likes (Newbie)]

Hi! I'm not sure why this scrolling isn't smooth. Here's the script in the CodePen:

 

$(function(){  
var wrapper = $("#wrapper"),
    $menu = $("#menu"),
    $window = $('.whole-wrap');
$menu.on("click","a", function(){
    var $this = $('.whole-wrap'),
        href = $this.attr("href"),
        topX = $(href).offset().left;
   
    TweenMax.to(wrapper, 10000, {
        scrollTo:{
            x: topX, 
            autoKill: true
        }, 
        ease:Power3.easeOut 
     });
  
  return false;
});  
  
});

 

So specifically the 'whole-wrap' on the 6th line should scroll smooth I think, but I am new to GSAP so I'm not sure exactly what I'm doing wrong..

See the Pen eeqdrg by connorv (@connorv) on CodePen

[connorv 2 Likes (Newbie)]

Actually I just got it! I needed to have wrapper in place of $window so that it moved the wrapper rather than (I guess?) trying to move the entire screen.

 

So now I have one last issue - for whatever reason you can click a link that the script has already scrolled onto & offsets some more, to a seemingly random(?) slide.  I'm not sure why this is - I would think that it would just try to go to the anchor it's already at which should do nothing. Can someone explain why this is?

[Sahil 2,541 Likes (Superhero)]

You can simply scroll to certain element and don't need to calculate offset.

 

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

 

As to answer why it is scrolling randomly, you are trying to scroll to the offset of that slide. So when your 2nd slide is in center, it's offset is 0. So when you click on second link again, scrollTo plugin scrolls to 0 which is first slide. If you click on 3rd link, it doesn't animate because offset of 3rd slide is same as where current scroll is. Plus if you click too quick the whole animation gets messed up because now you are referencing offsets while slides are at random positions.