smooth scrolling with locomotiveScroll and scrollTriggerProxy on VUE

[vlbn]

hello everyone!

i wanted to show you a little excercise i made applying what i've learn with @Carl on his fantastic ScrollTrigger course. 

i am having a problem..  everything works fine until i click a button which fires a function that uses the ScrollTo plugin. i did add that button with the intention of giving the user the option to skip the animation (happening as they scroll) and jump to the following scene... its best if you see for yourselves what i mean.

since is a VUE project i have all the logic separated on mixins.

here is the link to the codeSandbox i made. https://codesandbox.io/s/help-me-world-44mr3

thanks again for reading me. 

[ZachSaucier]

Hey vlbn. This is because the ScrollToPlugin has no idea that you're using a smooth scrolling library (which actually doesn't use the normal scroll position of the page). As such, it's probably best to not use the ScrollToPlugin when pairing things with a smooth scrolling library. 

 

Locomotive Scroll has a scrollTo method that you can use instead. It has its own animation functionality which is probably fine for this sort of thing. Or you could use it with a duration of 0 and animate a scroll value using GSAP if you wanted to.

[vlbn]

11 hours ago, ZachSaucier said:

Locomotive Scroll has a scrollTo method that you can use instead. It has its own animation functionality which is probably fine for this sort of thing. Or you could use it with a duration of 0 and animate a scroll value using GSAP if you wanted to.

thank you @ZachSaucier for the suggestion. i did as the documentation explains and i get the very same result.
i've updated the codeSandbox..  https://codesandbox.io/s/help-me-world-44mr3

[ZachSaucier]

4 hours ago, vlbn said:

i did as the documentation explains and i get the very same result.
i've updated the codeSandbox..  https://codesandbox.io/s/help-me-world-44mr3

That's because you created two instances of Locomotive Scroll. You need to use the same instance (and not create multiple). 

[vlbn]

1 hour ago, ZachSaucier said:

That's because you created two instances of Locomotive Scroll. You need to use the same instance (and not create multiple). 

 

?‍♂️ UPDATED:  https://codesandbox.io/s/help-me-world-44mr3

 

@ZachSaucier solved it!  thanks a lot man!  PLEASE if someone else comes up with a better solution let me know.

[ZachSaucier]

1 minute ago, vlbn said:

if someone else comes up with a better solution let me know.

What do you mean better solution? What's poor about what you have right now?

[vlbn]

1 minute ago, ZachSaucier said:

What do you mean better solution? What's poor about what you have right now?

NO no.. don't get me wrong. what i meant to say is that i am not that expert and maybe someone smarter than me could come up with something different. i like the idea of solving things with different methods. thanks!