Jump to content
GreenSock

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

smooth scrolling with locomotiveScroll and scrollTriggerProxy on VUE

Recommended Posts

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. 

  • Like 1
Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Haha 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

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.

×