Change the container with gsap?

[MadeInMoon]

I'm guessing if we could change the container (like a nested div) when we require SparkScroll in a component, instead of using the body as reference for the scrollTop value? Thank you by advance

[gilbox]

The code uses the container variable name for this reason, but I never actually added the feature. PR welcome.

[MadeInMoon]

I suceeded just few minutes ago, changing few lines to 'react-spark-scroll/lib/spark.js' but it begins in a dirty way:

var container = document.getElementById('myDiv');

How to dynamicly send a string value or a dom element in here?? :

var spark = function spark(element, proxyElementFn, timeline, options) {
   ..
   var container = document.getElementById('dynamicValue');
   ..
}

[gilbox]

Here's an idea off the top of my head, not sure if it'll really work:

• Add a container argument to the spark() function.
• Add a container prop to the SparkScroll component and pass that into the spark() call in componentDidMount
• Create a <SparkContainer /> component... with a render function that looks something like this (this is a essentially a simplified version of react-track):

render() {
      return (
        <div ref={r => this.nodeRef = r} {...this.props}>
          {this.nodeRef && this.props.children(this.nodeRef)}
        </div>
      );
}

• Now do something like...

<SparkContainer>
{container => 
     <SparkScroll container={container} ..........>
            ......
     </SparkScroll>
}</SparkContainer>

... the downside to this is having to pass in the container prop to all SparkScroll elements. You can actually get around this by using a factory pattern to do this instead:

<SparkContainer>
{SparkScroll => 
     <SparkScroll ..........>
            ......
     </SparkScroll>
}</SparkContainer>

[MadeInMoon]

I think I've done 50% of the work, I cloned the repo, created a branch, but i don't have the permission to commit and publish it. Am I doing the right thing?

[gilbox]

fork the repo to your own github, create a branch there and push it up, then open a PR

[nickpolet]

Has this progressed at all? Curious, as I have a requirement for something like this (scroll effects within a container that is not the body).