Jump to content


Horizontal Timeline

Recommended Posts



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.



Thank you so much...


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

Link to comment
Share on other sites



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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.