Width of horizontal ScrollTrigger & each item inside it

[web_roll]

Hey,

Hoping someone can help with this...

Got a couple of animations going on, I need the DrawSVG lines to pretty much stick with the middle of the page. This is probably really simple, but for the life of me can't work out why it's running ahead.

I'm getting the widths of each item, then starting and ending a Scrolltrigger. I know it doesn't need it's own timeline, but I've got some other stuff going on in there so it's needed in my project.

 

See the Pen QWdpqwa by web_roll (@web_roll) on CodePen

[akapowl]

Hey @web_roll

 

For fake-horizontal scrolls like yours, where the amount of translation of the content to the left and the duration of the scroll for the ScrollTrigger are not the same, you will have to incorporate an offset into your calculations, as is described in this thread in detail

 

 

 

For your demo that would look something like this ( I also tweeked the start a bit so it appears more centered)

 

start: (item.getBoundingClientRect().left - window.innerWidth/4) * (historyTimeline.offsetWidth  / (historyTimeline.offsetWidth  - window.innerWidth)),
end: (item.getBoundingClientRect().left + item.offsetWidth) * (historyTimeline.offsetWidth  / (historyTimeline.offsetWidth  - window.innerWidth)),

 

 

See the Pen fd82e71e7ff3effb8a2e7538e4d6d65d by akapowl (@akapowl) on CodePen

 

 

Does that feel more like what you had in mind?

 

 

 

[web_roll]

Right on @akapowl, must have missed that thread.

Thanks for the help, outstanding support on these forums