Jump to content
GreenSock

Shehzad Asif

Locomotive Scroll Update

Recommended Posts

Hi Zach,

 

This is just an update for locomotive scroll working with gsap specifically for touch screen and pinning. If you find it valuable pls update it on scroller proxy page.

 

Before update:

After update:

See the Pen dypyRoQ by ShehzadAsif (@ShehzadAsif) on CodePen

 

To activate smooth on touch screen:

 

This code is required in the locomotive object

 

// for tablet smooth
  tablet: { smooth: true }

 

  // for mobile
  smartphone: { smooth: true }

 

Following line is no more required to work pinning on touch screen

  /* pinType: document.querySelector(".smooth-scroll").style.transform
    ? "transform"
    : "fixed"*/

 

After the update of 4.0.4 recently, now scroll is much smoother then before. Why not have a look at both demos above and feel the difference.

 

Regards,

Shehzad Asif 

 

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks @Shehzad.

 

On desktop, it acts rather strangely/glitchy at times. Sometimes it's okay, but I had a hard time grabbing the scrubber or it'd jump after releasing or it wouldn't keep up with my mouse or didn't scroll inside the iframe (the parent page scrolled instead even if the mouse was over that iframe), etc. Not absolutely horrible, but it felt weird as a user. It definitely didn't feel natural. Is that due to the LocomotiveScroll update? 

  • Like 1
Link to comment
Share on other sites

Hi Jack

 

I am using locomotive for some time and did not face any problem like yours. All things scrolling, scrubbing and pinning works perfectly but a demo would be good thing to explore the problem.

 

Regards,

Shehzad Asif

Link to comment
Share on other sites

  • 7 months later...
On 11/26/2020 at 6:45 PM, Shehzad Asif said:

Hi Zach,

 

This is just an update for locomotive scroll working with gsap specifically for touch screen and pinning. If you find it valuable pls update it on scroller proxy page.

 

Before update:

 

After update:

 

 

 

To activate smooth on touch screen:

 

This code is required in the locomotive object

 

// for tablet smooth
  tablet: { smooth: true }

 

  // for mobile
  smartphone: { smooth: true }

 

Following line is no more required to work pinning on touch screen

  /* pinType: document.querySelector(".smooth-scroll").style.transform
    ? "transform"
    : "fixed"*/

 

After the update of 4.0.4 recently, now scroll is much smoother then before. Why not have a look at both demos above and feel the difference.

 

Regards,

Shehzad Asif 

 

So I added smartphone and tablet smooth true, but It doesn't work for me for some reason. (I also commented out the gsap pin which should be used when mobile/tablet smooth is disabled). 

It doesn't add smooth class to my HTML element either. Im not getting any errors, really werid

Link to comment
Share on other sites

8 hours ago, artyor said:

So I added smartphone and tablet smooth true, but It doesn't work for me for some reason. (I also commented out the gsap pin which should be used when mobile/tablet smooth is disabled). 

It doesn't add smooth class to my HTML element either. Im not getting any errors, really werid

This sounds more like a LocomotiveScroll question, but that's a 3rd party tool that we're not really familiar with. You might want to contact the author or post your question in the Github issues section on that repo. 

 

We'd be happy to answer any questions about GreenSock products - just please provide a minimal demo and we'd be glad to take a peek. 

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