Jump to content
GreenSock

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

Problem with upgrade from Locomotivescroll to ScrollSmother

Go to solution Solved by GreenSock,

Recommended Posts

Hi,
I upgraded my project from Locomotiscroll to ScrollSmother, and I have to say that I am much better off.

However, I have a problem with my page height with ScrollSmother.


In the animation that you find below (link hover), with Locomotivescroll, adding "html, body {height: 100%;}" the hover works perfectly and the images are the correct size, while with ScrollSmother the images are not resized, also, the longer the page, the larger they become.

 

1 - Example ScrollSmother 

2 - Example Locomotivescroll

 

 

See the Pen QWQvoZP by umberto (@umberto) on CodePen

 

 

 

Is it possible to solve this problem?

Thanks

 

See the Pen NWyjJbB by umberto (@umberto) on CodePen

Link to comment
Share on other sites

  • Solution

Probably the easiest fix is:

// OLD
const container = document.body

// NEW
const container = document.querySelector('#smooth-scroll'); 

See the Pen MWQoaRW?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Explanation:

Unlike LocomotiveScroll, ScrollSmoother leverages NATIVE scroll, so it must set the body's height to whatever the height of the actual content is (that way the real scrollbar reflects things accurately). You had your <canvas> dimensions dependent on the body. So just use the wrapper element instead which should match the viewport's dimensions. 

 

Does that clear things up?  

 

Glad to hear you're enjoying ScrollSmoother. Thanks in advance for becoming a Club GreenSock member 🙌

  • Like 1
Link to comment
Share on other sites

This is perfect, it was what I was looking for.


ScrollSmoother is really beautiful, it has only one thing that is "missing", the horizontal scrolling of the elements. I hope this option will be included in the next upgrades.

 

Thank you very much

Link to comment
Share on other sites

You can horizontally scroll elements with ScrollTrigger like this ☺️

 

See the Pen BamxgBb by supah (@supah) on CodePen

Link to comment
Share on other sites

41 minutes ago, Cassie said:

You can horizontally scroll elements with ScrollTrigger like this ☺️

 

 

 

 

I meant this:

 

See the Pen GRQEmYq by umberto (@umberto) on CodePen

 

Thanks

  • Like 1
Link to comment
Share on other sites

Well it looks like you can achieve that with scrollTrigger too 😉

Link to comment
Share on other sites

Thanks 👍

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.
×