Alexo

Hey @mvaneijgen, Perfect! That is exactly what I am after, can't believe I didn't think of setting pointer-events - so obvious in hindsight That other pen is also what I will be adding later on so will take that example an implement as well Thanks Alex

Hi Team, Would have re-opened my last post about working on this scroll sequence but cannot find it on the new forum/site 😕 Anyway, I have been struggling with finding the 'best' approach to tackling pinned elements that need to have clickable links. If you refer to the pen and see the left text #Link3 will show in its place (no matter what section you are pinned on). As it is pinning the last element (section 3) on top of sections 1 and 2. I have tried a few routes in my actual project: Script to get the opacity of the element, then IF > 0.5 then set that on top using z-index. A second hidden gasp scroller without any pins and instead just covers the rough area with #hrefs at 100vh each The first option works but results in the image masks bugging out over each other, any more 'elegant' approach to tackle this issue would be much appreciated! Credits to @Cassie again for her amazing SVG revealer pen's very helpful and other scroll demos that are similar to this Cheers Alex

Hey, Thanks for that! That helped quite a bit, I have solved the issue I had. I built out this pen using one of the gsap examples to get a better foothold on what/how pinning was working like https://codepen.io/alex-rankin/pen/vYQxaqg I ended up changing the way the end is calculated to account for the item's length - the last one. Then also removed the calculation that handled that length in scss to a fixed height! Which is now working in my personal project (lots of struggle/iterations went into this in the last day lol) Cheers

Hey @Rodrigo, Thanks so much for the quick response! Setting pinSpacing: false does remove the pin spacing as @Carl's video explains (very helpful) However, the transform still gets applied transform: translate(0px, 1651px); at the end of the scrollTrigger. Changing the end of the scroll just end: "bottom" fixes this but creates an overlap. I am aware that this is due to the pin applying this. Am I right in thinking I need to calculate the real ending of the scroll trigger with a +=100 or the correct amount here? I did play around with setting the end at the footer blocks end but this did not work as expected I have updated my pen accordingly with the new changes and some colors to help display this better https://codepen.io/alex-rankin/pen/PoxpaKr Cheers

Hi All, Hope I am not doubling up on the questions/issues here but I have been working on QWdrYjO paired with @Cassie's amazing SVG masking pen RwRORqB which are both great for learning! As I am relatively new to this library I have been completely stumped by a transform bug that is going on in David's pen and mine. I know the reason it is occurring but am unsure what the best way to re-calc the number of items there are to fit the scroller. I have this forked pen here as a simple example QWJppze This SCSS is taking the 140vh height and * by the amount of --items (in this case 3) .c-fluid-reveal { --fluid-reveal-section-height: 140vh; height: calc(var(--fluid-reveal-section-height) * var(--items)); } The issue that is occurring is when you reach the scrollers 'end' a transform is tagged onto the wrapper '.c-fluid-reveal' which is *3 the height of the fluid section. If you watch '.c-fluid-reveal' in inspect you can see it goes from transform: translate(0px, 0px); Too transform: translate(0px, 1510px); Or depending on your screen height How can I avoid this from occurring? Hopefully this isn't a super dumb question but has left me scratching my head haha Cheers Alex

Thanks, Rodrigo! Can't believe I didn't see that, life saver cheers!

Hi all, I have been struggling with this issue for a few days now and cannot figure out why it is occurring. Basically what is happening is just after my first title sequence is show on the scroller the speed of my animation seems to ramp up, creating a really aggressive turn around my animated cart? I have tried the following: - Stripping back script to the basics of a scroller with a loop (no titles etc) - Removing all irrelevant styling and html markup - Using existing scroll sequence scripts to see if its an issue And yes the animation is correct, smooth like butter. Have used the image sequence in AE and Premiere etc and no issues with the speed Could someone point me in the right direction or spare a brain cell or two so I can get past this hicup? Cheers *Just to note best to edit on codepen as its not responsive as such, for the full current website its available on my dev here > https://dev.lugecartworld.com/