JonesLafuente

All down to your help Cassie.

My version with the snap working including each pair inside the pinned section. https://codepen.io/joneslafuente/pen/NWyLXre

Cassie. You are a STAR. All working! Thanks so much. Brian

Cassie The pin content tween is the 4 blocks inside the pinned container on the right. Now it only displays the first 2 that are visible. When pinned it scrolls to show the last 2, the last has a class .last added which is the endTrigger. I will take a look through your other changes and see if I can get it working. I understood why it was getting to the value of 1 by the end of my pinned section, just didn't know if there was a way to ignore the pinned content from the scroll value? Thanks again.

Updated the array values for the snap in this version https://codepen.io/joneslafuente/pen/xxYaLRR

Here is a quick demo, added a pinned section that has 2x the section height of content within it. Now when scrolling the console shows it reaches 1 at the end of the pinned content which is correct, but still has the final section below it. I know the other values are now out by adding this pinned section but wanted to illustrate what is happening. https://codepen.io/joneslafuente/pen/xxYaLRR Does this make sense or am I missing something? Thanks

I understand and I don't get a value greater than 1. It just reaches 1 during scrolling a pinned section so never get a value to snap to beyond that. Will put a demo up later when I get a chance. Thanks anyway Brian

Cassie Thank you so much, that is a great help. One more question on this though. When I have a pinned section, the values only go as far as 1 in the console and I do get values for the sections after the pinned one. Do I need to do something different for pinned sections? Thanks Brian

Ok, I have 2 small demos to illustrate, identical except the version that does not snap has a smaller section. Not sure if it is possible to snap when the page is created with these smaller sections? Working version first with all the sections the same. https://codepen.io/joneslafuente/pen/LYQJxVP And then the version with the smaller section inserted. https://codepen.io/joneslafuente/pen/RwQYKWa Thanks

Thanks. I have found the issue. If I remove all the sections that are not 100vh such as header, footer and any other spacer items, it works as expected. Just not sure how to get my head around any logic that allows it to snap to sections less than 100vh. I will get a couple of demos up in the morning. Is the end of a very long day here. Thanks

Hi Am still getting my head around everything and have most of what I need working (will post an example when I do as I have had so much help here already). I have a parallax section page with pinned items all working and thought I would see if snap would work with the sections. It doesn't seem to. If I remove the inline data-speed from the section, the snap works as expected. I am guessing it is because of the transformation being applied to the parallax section. Do I need to try another route or does snap not work with parallax sections. I can put a demo of the two up if necessary but figured somebody more knowledgeable would most likely have a simple answer. Thanks

Cassie, thank you so much. I still have a lot to learn but enjoying it.

Thanks for all the guidance but I am struggling a bit. I have made demo and all working except I am trying to determine the height of the pinned content and get that to scroll with the pinned container until it has scrolled and then continue. I either get 3 of the 4 scrolling or in this case I get an additional item, so have 5. https://codepen.io/brian-jones/pen/MWQEvXW

Ok, so as I mentioned I am really loving what can be done with ScrollTrigger and am also looking at SmoothScroller. I think I may have to join Club Greensock but before I do can somebody tell me if the following is possible in either ScrollTrigger or SmoothScroller and if either is preferable. I want to have a pinned container that will have content that scrolls vertically within. It may be 2x, 3x or greater than the container height, it may also be dynamic content. Just thinking ahead here. Is it fairly straightforward to determine the height of the container (eg 100vh) and then the height of all the content within. I have examples that all work when you know the fixed size and number of items in the content. Also can this these values be calculated or updated if the user clicks a button to show more? I know I now need to look through the videos again and read the documentation but hoping if one is more suited over the other then someone can guide me. Thanks JL

Thanks for the info, I did as you suggested and stripped everything back. I had used the full image parallax example and this didn't work so looked at the data-speed version. This works when I use the data-speed attribute on just the bg image inside the main slide container. Will post an example when I can in case anyone else has this issue. Thank you once again!

But I have a question I am hoping someone can answer. I am building a full browser image parallax site but one section needs to scroll within it so it needs to be pinned until the last item has reached its end and then the whole page continues. Problem I have is when I have the parallax images working the pinning doesn't. When I disable the parallax it works perfectly. Note this is for a client so am unable to share at the moment but they now only want the full images with parallax, not as we had originally intended with text animating as well. I am wondering if I need to look at SmoothScroller to do the parallax and pinning? All thoughts welcome. Am loving this so far... Thanks