cottoncreative

Thanks a million @ZachSaucier, that's exactly what it was. I've popped the slide/fade anims after the pin trigger and all works well above and below it now.

Hello I'm using the horizontal scroll example provided by Jack inside a pinned section which works a treat but I also have elements above and below that have fade/slide animations triggered as they scroll into view. The ones above the pinned section work fine but the ones below trigger early because the height of the pinned section doesn't take into account the width of the elements scrolling horizontally inside it: <div class="pin-spacer" style="flex-shrink: 1; display: flex; margin: 0px; right: 0px; bottom: 0px; top: 0px; left: 0px; position: relative; overflow: vis

Hi @ZachSaucier Many thanks for that, wonderfully simple with the correct prep. Apologies for the dumped CSS/JS, thank you for giving it a neaten. This is my first big push into animating SVG/Clip-Paths so I'm glad I've got this as a grounding to build on now. Are there cases when viewBox isn't recommended and what's a good resource for all these intricacies? Thanks again James

I'm trying to animate a clipPath <rect> width from 0 to 100% using scrollTrigger and scrub and would like it to grow from the centre. I've tried using transformOrigin which seems to work because it only fills 50% of the space so presume the other half is off screen and the centre is actually on the left of the window? I managed to get it working using css transform-origin with toggleClass on click of a button but dropping it into GSAP seems to present a new problem. I've attached a screen of the transforms applied, I'm wondering does GSAP affect the data-svg-