Jump to content
GreenSock

marcodellabate

scrollerProxy among different components in Vue

Go to solution Solved by ZachSaucier,

Recommended Posts

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!

  • Like 1
Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

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

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