web_roll Posted April 7, 2021 Share Posted April 7, 2021 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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 7, 2021 Solution Share Posted April 7, 2021 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? 3 Link to comment Share on other sites More sharing options...
web_roll Posted April 7, 2021 Author Share Posted April 7, 2021 Right on @akapowl, must have missed that thread. Thanks for the help, outstanding support on these forums 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now