Jump to content
GreenSock

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

Animation is instant & I'm not sure why

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 4
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.
×