Jump to content
GreenSock

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

Scrolltrigger & Locomotive scroll issue

Go to solution Solved by akapowl,

Recommended Posts

Hi everyone, 

 

I'm new to the community, but been a huge fan of GSAP which i've just started to get into. I'm currently working on a school project, and trying to implement Locomotive scroll with Scrolltrigger. The issue that im facing is when I enable locomotive scroll, everything seems to be working fine, but when i select and go to a specific  page from the menu, user gets stuck in that page, I've also realized that gsap animation that is triggered is also acting a bit strange on scroll, and i cant seem to get it working properly. The site functions normal without the locomotive scroll. I've added a rough draft of my project to give some idea of what i'm doing. I'm fairly new to javascript, and i'm not really sure if my implementation is correct, and i would really appreciate if someone could point me into right direction to setup Scrolltrigger and Locomotive scroll to work properly. 

 

Thank you & happy tweening 🙂

 

 

 

 

 

 

See the Pen mdONYzG by yigitaksoy (@yigitaksoy) on CodePen

Edited by newyorker
updated codepen demo
Link to comment
Share on other sites

 

Hey @newyorker - welcome to the forums.

 

Your implementation of ScrollTrigger alongside locomotive-scroll looks quite right to me - except for not adding in that line for the pinType.

 

// tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy(".smooth-scroll", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"
});

 

 

The problem you are experiencing is not related to GSAP or ScrollTrigger but rather to locomotive-scroll.

Usually these forums are trying to stay focussed on GSAP related questions, but I'm going to try and help you with this.

 

I suppose what you want to do on click of a menu link, is to scroll to that section on your page, right?

The issue revolves around how locomotive-scroll handles the smooth-scrolling very differently than the native browser scroll.

 

Thus you will have to first make sure the browser doesn't go on with business as usual when clicking any of those links (preventDefault) and then incorporate the locomotive-scroll specific scrollTo-functionality in your function instead of this default browser scrolling - because this is what will shift your page around in a way that everything won't work as intended.

 

This is one way you would probably want to handle this:

 

$(".menu a").click (function(e) {
  e.preventDefault()
  let target = e.target.getAttribute("href")
  console.log(target)
  locoScroll.scrollTo(target);
  navigation.reversed() ? navigation.play() : navigation.reverse();
})

 

Seems to work quite right for me

 

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

 

 

On a different note:

Actually, not everything else is working quite alright on your page.

That one image you have set your scrollTrigger appears to be lagging along most of the time.

 

That is related to it having some loco-scroll default effect attached to it (  data-scroll data-scroll-speed="-1" ).

This likely interferes with the GSAP-tween you are putting on it. I am not entirely sure what it does because I am not the most experienced with loco-scroll but removing it fixes the lagging - I put it on the div that is wrapping the image instead , but you will have to see if there it does what it is supposed to do.

 

I hope this helps. Cheers.

  • Like 4
Link to comment
Share on other sites

Hi @akapowl, thank you so much for your reply, and help. That's exactly what i was trying to do!  Your code, and removing the data-scroll attributes from the img fixed the issue. The only thing i've realized is that after updating the code,  everything works perfectly on desktop, but this time website and the menu doesn't function well on mobile. GSAP tween is not triggering, and when you click on any of the menu links, you get stuck like before.  In the console i can see that it logs the target when you click on the menu item, but it doesn't go anywhere.  I've tried adding:

 

pinType: document.querySelector(".smooth").style.transform ? "transform" : "fixed"

and removing all the locomotive-scroll attributes such as "data-scroll data-scroll-speed="-1" but no luck.  I know this topic isn't really related to GSAP, so i wont be bothering anyone about this new issue, but thank you again for your help 🙂

 

  • Like 1
Link to comment
Share on other sites

  • Solution

 

Judging from a quick glance at the 'documentation' for locomotive-scroll, the option smoothMobile: true doesn't exist (anymore?).

 

If you want your loco-scroll to be active on mobile, you would now have to use the tablet/smartphone options as it seems

 

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".smooth"),
  smooth: true,
  //smoothMobile: true
  smartphone: {
    smooth: true
  },
  tablet: {
    smooth: true
  },
});

 

 

This should make things work again on mobile.

 

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

 

 

If you wanted loco-scroll to not be active on mobile devices you would probably have to include some logic that checks for mobile and sets things like the scrollerProxy and the scrolling-to-an-id accordingly to that condition - but this is really way out of scope for these forums.

 

You might find some answers in relation to that in loco-scroll's issues section on github though.

 

  • Like 2
Link to comment
Share on other sites

Hi @akapowl, thank you so much for helping me again, i was actually aware of 

 

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".smooth"),
  smooth: true,
  //smoothMobile: true
  smartphone: {
    smooth: true
  },
  tablet: {
    smooth: true
  },
});

and i tried to use something similar, when i was first trying to implement locomotive-scroll, but didn't have any luck.  Thats probably because my setup wasn't correct back then, and they recently updated the library. I've been overwhelmed by all the documentation that i was going through for this project, and it didn't occur to me to try it again after updating the code. Now everything works seamlessly, and how they should. 

 

Thank you again for taking your time to help me solve this issue & happy tweening! 🙂

  • Like 2
Link to comment
Share on other sites

  • 6 months later...

Hi I have an issue too and I can not find where it comes from..

Locomotive js line breaks my scrollTrigger animation.

See the Pen wveOogY by Jeanlat (@Jeanlat) on CodePen

 

Link to comment
Share on other sites

Hello @Jeanlat

 

It doesn't work, because you create your ScrollTrigger before you initialize locomotive-scroll and set up everything else.

For things to work you will a) need to stick to the order of doing things that is shown in the .scrollerProxy() example with locomotive-scroll...

 

*** Update: fixed ***

 

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

 

 

 

EDIT

I just realized, that the order of things is messed up in the .scrollerProxy example. Maybe @Cassie could have a look at that?

Here is a working fork of that pen for now.

 

See the Pen 54f21d3def0ae4176857f36fd8e0fad7 by akapowl (@akapowl) on CodePen

 

 

 

 

 

...and b) also add a scroller property to your ScrollTrigger(s). 

 

See the Pen 8668e59ad1c16a128aec05abefe1e37a by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

Thank you a lot ! I was really beginning to turn in circle !

 

  • Like 2
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.
×