Share Posted December 8, 2017 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 More sharing options...
Author Share Posted December 8, 2017 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 More sharing options...
Share Posted December 9, 2017 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. 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now