How to slow down my Horizontal Scroll section

[Scriviante]

Hey guys,

I am building a site that contains a horizontal scrolling section that displays a scene with interactive elements (scroll down the page). It is looking cool and does what I want, however the effect would be more elegant if it moved more slowly through the scene. Currently, it flashes through quite abruptly. 

It is in Gatsby (React). I have attached the JS file for you to see my implementation of the code. 

https://tacticspaces.gatsbyjs.io/

Any ideas how I can slow it down?

Cheers!

Andrew

 

Demo.js

[Cassie]

Hey there!

 

You'll need to move the end triggers further down the page. Usually using the section's width is a good way to make it feel natural.

 

pseudo code -

 

end: `+=${container.offsetWidth}`

 

[Scriviante]

Ahh fabulous, thanks Cassie. That's perfect. The speed I like ended up being container.offsetWidth * 4 haha. Nice and slow...