Horizontal Timeline

[Sukru 6 Likes (Newbie)]

 

 

Hi, I want to do something similar to history. There will be years and articles and photographs of that year. And I want to make them parallax when scrolling horizontally. I created a demo codepen. I thought I did that because each panel class needs to have auto-width in itself, but everything overlaps.

 

I am sharing a site as an example.

https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html

 

Thank you so much...

 

See the Pen zYaxzaz by sukruemanet (@sukruemanet) on CodePen

[alig01 81 Likes (Contributor)]

Hey,

 

Since your sections have different sizes, I wouldn't use xPercent. Instead, try to calculate the actual size that needs to be scrolled. 

 

let container = document.querySelector(".container");

//change xPercent inside scrollTween with the following line
x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",

 

You should definitely check if there are better ways to calculate the width, because I only copied the first one I found.

 

Hope this helps.