Issue retrieving narration data using an absolute path.

[ryann254]

As per you documentation, the one of the ways of getting narration data is to use an absolute path. I've tried to use the absolute path in a react app but no data is being fetched.
Here's the link to the repo....https://github.com/glidaa/glidaa.com/pull/2
Would appreciate help.

[Ryshackleton]

I would suggest fetching the narration and data directly using the readRemoteFile method you were using for the other static resources. I'm not sure how React will handle some of those file paths, so it's probably better to just fetch the data as a JavaScript object or array.

Generally speaking, ScrollyTeller probably won't work in the way that you have set it up because ScrollyTeller is set up to manipulate the DOM directly, targeting a specific div id. You would need to find a way to separate React's rendering from ScrollyTeller's so they don't interfere with one another. A hacky way to do this would be to have React render a single DOM element with a ref and a specific id that matches the appContainerId field in the ScrollyTeller configuration. Keep in mind that you can only render 1 element in that way or the id won't be unique. I think you will still have problems with this approach though due to React's tendency to re-render often, which would probably cause the entire "stack" of narration to re-render.

Another option that has less functionality, but would be more React-friendly is react-scrollama, which is built for React apps. React-scrollama will require that you build your own "Steps", and I have had problems getting progress events to work properly in that library, but I think it's probably a better option if you're wanting to stay with a React app.

Best of luck.
-Ryan