Jump to content
Search Community

Horizontal Timeline

Sukru test
Moderator Tag

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.

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

 

Thank you so much...

 

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

Link to comment
Share on other sites

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.

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.
×
×
  • Create New...