cotton

Hello I'm working on a loop that clones a section as the previous section reaches the bottom of the page so it gives the illusion of an infinite scroll. I've got a forEach utility set up looking for all elements with certain speed classes to add a ScrollTrigger parallax effect to them. This works fine on the first 'master' element but all the cloned ones, while having the inline transform applied, don't animate. In the clone function I've included a ScrollTrigger.refresh(true); but it doesn't appear to have any affect. Any help would be greatly appreciated.

Hi Jack I think so, it was just getting the scrollProxy on the go so will move on to debugging/fixing the rest now. I tried a couple of other 'infinite/clone scrolls' and came across this one that seemed to work the best. Happy for any pointers though!

Aha, I think I figured it out. The [data-speed] animation was looking for the ScrollTrigger.maxScroll(window) and should have been the new scrollerProxy ScrollTrigger.maxScroll(context). It's broken the loop but least it's working with ScrollTrigger now. Rubber ducking 101. https://codepen.io/Cottonltd/pen/QWONKyL

Hello fellow GSAPers I'm using a bit of script to create an infinite loop scroll of images and it essentially fixes the wrapper and allows the image wrapper to scroll while cloning the image elements. Now that I've got it working I'm trying to integrate ScrollTrigger using the ScrollProxy but I'm not sure what's going on. The script already has the getter and setter functions so I've tried integrating them into the default ScrollerProxy code without luck. It's my first time using the proxy outside of locomotive scroll etc so just trying to get my head around what it should and shouldn't be doing. Any advice/guidance would be much appreciated.

Would you look at that! Thanks @akapowl, really appreciate the time spent tidying up my JS too.

Hi Justin I went through this on this project and ended up having to use a clippath for the arrow shape and embedding the image in the SVG for this exact reason. The SVG is styled at 100% width and height and then the clippath is animated to get the zoom effect. The original thread is here and I've got it up on CodePen if you want to have a look/experiment. Hope this is of some help.

I've created a scrollable 'carousel' that goes horizontal as you scroll. I'd like each slide as it enters to affect the .dot pagination that it corresponds to by adding an active class to it. The slide count is dynamic so I've added an individual id to each which is also added as a data-panel attribute to the .dots. Sure it's going to be something really simple but I can't see the wood for the trees so any guidance would be appreciated.

Managed to get it working by using the trigger as the brand__panel and start: at 'bottom +size-of-header'. Thanks again @Cassie!

@Cassie this is brilliant, thank you. I'm struggling to get it to work on the full site though, the header marker still sits at the top of the header elem on page load (not taking into account the size of the brand__panel). I've tried stripping everything out apart from what's in the Pen too but no luck. Could I confirm these are the changes you made: – Moved whole <header> inside the .brand__panel div – Added .last to an element – updated the header__wrapper scrollTrigger – Added position: absolute and bottom: 0 to the header_wrapper Did I miss anything?

Hello I'm looking for a solution to allow me to pin the vertical bar svg to the top of the page when the .header_wrapper it is inside hits the top of the window. The markers show the function works but it doesn't seem to be taking into account the +=3500 end/pinSpacing of the 'intro' scroll so pins it too early. I'm currently trying to use a pin to stick the header to the bottom on load and have the end the same as the intro part but then once this is complete it jumps 3500px down. Essentially, I'm trying to stick the header to the bottom until the intro section has been scrolled through, then the content and header will scroll up until the header bar hits the top of the screen and then the menu icon will stick in place. I'm sure there is a simple solution or logic that I just need to get my head around but any guidance would be much appreciated. Thanks James

Hi Shaun Apologies, the progress bar is probably more key than I had anticipated. I've added it's styling etc into the original pen. Essentially, the text wipes in after the progress bar has completed (on page load) so that is all part of the non-scrollTrigger part. It's only once that TL has played that the copy needs to be controlled by scrollTrigger. I tried adding the scrollTrigger into the progress_tl but it didn't work. Thanks James note: I've also changed the y:300 to y:100 to aid the pen being viewed directly in the embed.

Hello all I've got a bit of an issue that I can't get my head around. I have some text that, on page load I have animated in (y & autoAlpha). Once completed and the user scrolls I would then like this same text to animate y & autoAlpha of the screen when reaching a certain point. Currently the intro works fine but then as you scroll off the elements just seem to disappear and don't reappear when you scroll back. Looking at the inspect it would seem the lines are given the initial y:300 transform. It feels like the two gsap animations are competing with each other. Any ideas? James note: Try the pen on CodePen rather than the embed to see it affecting more than just the top line

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: visible; box-sizing: border-box; width: 1632px; height: 2596px; padding: 0px 0px 1632px;"> <section id="fix-section" style="transform: translate3d(-270px, 0px, 0px); left: 0px; top: -0.40625px; margin: 0px; width: 1632px; height: 964px; padding: 0px; box-sizing: border-box; max-width: 1632px; max-height: 964px; position: fixed;"> ... ELEMENTS HERE ... </section> </div> The pin-spacer has the calculated full height of all the elements inside it (2596px) but the fixed-section only has the single contained element height (964px) so the animated items below fire once 964px has been reached rather than waiting for 2596px. I've tried making a pen of this but can't replicate so hope the above generated code is of use. Can I force the elements below to wait until the pinned section has ended? Thanks in advance.

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-origin attribute see here? Any help would be greatly appreciated.