Page smooth scroll is not working with Animated horizontal scroll technique

[Rehman132 0 Likes (Newbie)]

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

[akapowl 5,134 Likes (Superhero)]

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

 

[Rehman132 0 Likes (Newbie)]

@akapowl

 

Thank you so much