blurthelines limited

thanks - I get it now. appreciate all the help.

thanks - that does help clear up what's happening and lets me understand what's happening under the hood. - Sorry to take this a step further but I am adding some anchor tags so it can scroll you to the correct card via the url. - you'll see I added a button on the left that I am simply using to illustrate my problem here. - when someone clicks the button the scroller should scroll to that card - number 10 (the card should have it's start point on the left of the screen). - it should be relatively simple : calculate the y position where the card is on the scroller, then tell the scroller to go to that pixel value. the problem is the scroller doesn't go anywhere near that point. any clues? p.s I added some extra code to the button to show I am calculating the position of the target card via 2 methods (.position() + looping thro). both calculate the same value and the scroller is certainly at that point (I added a listener to console out the current pos) but the card isn't in the correct place. just can't figure it out https://codepen.io/b-t-l/pen/abjdKPN?editors=1111

thanks Jack and Cassie - that's exactly what I was hoping for but couldn't get done on my own. I'm so impressed by how quickly and patiently you have helped what I'm sure seems like a small query. huge huge thanks ! to help any others reading this topic - I have cleaned up the code, added comments etc so it's easier to understand and reuse for others: https://codepen.io/b-t-l/pen/abjdKPN?editors=1111

Hi - yes - that method does sort the problem out! thanks Does does however create a small new problem I'd need to resolve, and that is that when scroll trigger is re initialised it will jump back to the start of the scroll. so if you clicked open a card in the middle then you'll lose your place. I'm doing some reading as I'm sure there must be a relatively easy way to set the initial position of the scroll trigger when reinitialised and match that to some calculated x value noted before reinitialising. I'll post a final pen here once I get that sorted for others to use.

Hi - I only added the green to see the edge I have removed it on the codepen if makes the issue clearer. Go to the end of the timeline (scroll all the way right) - then click open on the last card and you'll see that it disappears offscreen. this is because the overall width of the timeline (container) isn't being updated and so the item is falling below the row. Here's a fork that doesn't have the scroll trigger so you can see how it's suppose to work (you'll have to scroll sideways to move along the timeline): https://codepen.io/b-t-l/pen/jOpPgKp And here the scrolltrigger added: https://codepen.io/b-t-l/pen/JjBdOVz I did some offline testing and think I'm getting closer to the issue: - If I remove the scroll trigger code and just run the update width function the width of the container does expand and all the items stay in 1 row. - when adding the scroll trigger back in and looking at the Dom elements I can see that the update width function runs and gives a new value to the container but the pinspacer dom element added by scroll trigger doenst update its width on scroll trigger.refresh() - and I can't update it via javascript - it's width stays the same as when the scroll trigger was first initialised no matter what you do.

thanks for such a quick reply... really appreciated. I checked your code - but is it just me or is it still not working? The idea is that no matter how many cards are opened the width of the container is staying wide enough to see all the cards when you scroll right. When I don't use the scroll trigger my little updateTimelineWidth() function does the job just fine. But add the scroll trigger and it doesn't work anymore. - if you scroll to the end on the cards (their are 20) you see some green space (which is the container on which the scrolltrigger is acting) - then if you open a few cards (do the end ones so you can see the green space to the right e.g card 17 + 18 + 19) you'll see the the trigger isn't updating the width as the green space gets smaller until you lose a few cards.

Hi - I know there must be an easy fix for this but I read the forums/eg etc - and can't get it working - any help would be appreciated. I created a very basic codepen example to illustrate basic problem. - I have a dynamic amount of horizontal cards that extend beyond the width of the screen. (there always need to be in 1 row ie no vertical scrolling) - each card can open or close to a new width based on a button (their is also an option to open/close all the cards at once) and the overall width of the container expands to fit. Simple that all works fine. However when I add scroll trigger (I want to users vertical mouse scroll to move the user horizontally thro the timeline) - it no longer updates the width of the overall container correctly. I have tried using the 'end' to use a function to determine the width, invalidateOnRefresh etc. any clues?