Jump to content
Search Community

Page smooth scroll is not working with Animated horizontal scroll technique

Rehman132 test
Moderator Tag

Recommended Posts

Hi folks

I am using trying to use this technique  

See the Pen RwgEEqj by GreenSock (@GreenSock) on CodePen

  in m y project but when I am using it the normal page scroll stop smooth scrolling and page get disturbed. 

 

* in my code i just add 2 parent divs  ( <div id="smooth-wrapper"> <div id="smooth-content"> ) and its code 

let smoother = ScrollSmoother.create({
    wrapper: '#smooth-wrapper',
    content: '#smooth-content',
    smooth: 1,
    smoothTouch: 0.1,
    effects: true
});

After adding this the horizontal scroll get discrubed.

Thanks in advance 

See the Pen zYaKyYb by abdul-rehman-sadiq (@abdul-rehman-sadiq) on CodePen

Link to comment
Share on other sites

Hello @Rehman132

 

Here is a working fork of that demo with ScrollSmoother included. The only change I needed to make was to set the .panel's height to 100vh instead of 100% for it them display correctly because of the wrapping divs, which do not have a specific height defined.

 

You were not loading the ScrollSmoother plugin in your pen to begin with - it is throwing an error in the dev-tools console, saying 'ScrollSmoother is not defined'. Be aware, that ScrollSmoother is a Club GrenSock plugin for members of the ShockinglyGreen tier and above - you can test it for free (e.g. on codepen), but - at the latest - when moving a project live, you'll need the proper license.

 

I hope this will help; Happy tweening!

 

See the Pen xxzENBp by akapowl (@akapowl) on CodePen

 

  • 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.
×
×
  • Create New...