The react-scrollsy from olarsson

react-scrollsy's People

Contributors

Stargazers

Watchers

react-scrollsy's Issues

Example with dynamic trackers

Hey there,
love the project.

I have a case where I would like to create multiple ScrollTrackers with images inside based on an array of images and apply Parallax effect to them.

I find it problematic to do because of references. I am trying to do the following:

const itemsRefs = useRef([]);

//  ...

return (
<ScrollTrackerDocument>
  {({ scrollData }: IScrollData) => {
    return (
      <div>
        {arParallax.map((item, i) => (
          <ScrollTracker
            key={i}
            scrollData={scrollData}
            elem={itemsRefs[i]}
            settings={{
              duration: {
                distance: 100,
                unit: "%",
                basedOn: "vp",
              },
            }}
          >
            {({ scrollObject }: IScrollObject) => {
              return (
                <div ref={itemsRefs[i]}>
                  <p>progress: {scrollObject.progress}</p>
                  <img
                    style={{/*stuff*/}}
                    src={item.image}
                  />
                </div>
              );
            }}
          </ScrollTracker>
        ))}
      </div>
    );
  }}
</ScrollTrackerDocument>
)