scrollerProxy among different components in Vue

[marcodellabate]

Hello,

I have Vue project with a parent component which has attached a Smooth Scroller from IdiotWu (same one used in the scrollerProxy tutorial). 
This component acts as a wrapper for multiple children components, one of which needs some ScrollTrigger events attached to it.

I cannot figure out how to use the scrollerProxy to make the scrollTrigger work in such a situation. Explanation:

 

// Parent component

<template>
  <div id="wrapper">		<---- this div has smooth scroller
  	<child-component />
    <div>//Stuff</div>
    <div>//Stuff</div>
  </div>
</template>

<script>
import Scrollbar from "smooth-scrollbar";
import childComponent from "childComponent.vue"

export default {

	mounted() {
		Scrollbar.init(document.querySelector("#wrapper"), options);
	}
}
</script>

// child component

<template>
  <div class="divs-to-scrolltrigger">
    <div class="div"></div>
    <div class="div2"></div>
  </div>
</template>

<script>
  
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);
  
export default {
  // ??
}
</script>

In such a case, where do I insert the scrollerProxy?
Thanks in advance!

[ZachSaucier]

Hey marcodellabate. 

 

19 hours ago, marcodellabate said:

where do I insert the scrollerProxy?

There two main ways that you could set it up:

1. You could set up the scrollerProxy inside of the parent component. This is particularly helpful if you could have multiple child components that are going to use the scrollerProxy. It also makes your variable containment easier.
2. You could pass a reference of the smooth scroller instance to your child component and set up the scrollerProxy there. This might be preferable if you only have one component that will use scrollerProxy and want your code to be more contained to the relevant components.

Ultimately the core approach is the same: make sure to set up the scrollerProxy after you created your smooth scrolling but before you create any ScrollTriggers that use that smooth scroller.

[marcodellabate]

That worked, thanks!

[Page Tailoring]

17 hours ago, marcodellabate said:

That worked, thanks!

@marcodellabate can you post solution?

[marcodellabate]

@Page Tailoring I instanced smooth scroller in the Parent component and then used the Vuex store to pass the instance to a child of a child (if you have a simple parent-child case you can pass it via the props instead).

Then I used the instance as you usually would with scrollerProxy (as mentioned in the docs).