Marc T.

I'm trying to use different components with ScrollTrigger, but I don't know why the calculations don't work and I don't know what I'm doing wrong If I use the components separately it works, but together it doesn't... Can anybody help me? Thanks!

Nice! I didn't update my gsap version correctly Thanks @GreenSock!

Hi @GreenSock! I've just update to version 3.10.3 but when I use smoother.paused(true) I receive the following error in my console: Uncaught TypeError: _inputObserver is not a function at ScrollSmoother.paused (app.js?id=17ee648e3af68080c2b4:50265:23) at openNav (app.js?id=17ee648e3af68080c2b4:53012:25) at HTMLDivElement.<anonymous> (app.js?id=17ee648e3af68080c2b4:53047:17) at HTMLDivElement.dispatch (app.js?id=17ee648e3af68080c2b4:22187:27) at HTMLDivElement.elemData.handle (app.js?id=17ee648e3af68080c2b4:21991:28) Do you have any idea about it? Thanks!

I made some tests but it doesn't work... I edit my codepen. You will see you can get "last" div. https://codepen.io/marctaule/pen/OJzQgRQ If I use refresh in every image loaded, it seems that works but there are some performance problems. document.addEventListener('lazyloaded', function(e){ smoother.ScrollTrigger.refresh(); });

Oh nice!! This works for me

Hi! I'm trying to use Scrollsmoother but I have a problem with lazyload images. The scroll doesn't refresh or update when images are loaded. Maybe it could nice a method for refresh or update scrollsmoother. Anyone has a solution for this? Thanks!

Thanks @GreenSock! For me this works perfect

Hi! I'm using Scrollsmoother in a website and I have some problems. I'd like to open a modal with scroll but overflow: auto; in this modal doesn't work. I also try to use two instances of ScrollSmoother but it doesn't work either. Can anyone help me? Thanks!

Hi! I'm having problems with Split Text. I'll try to explain... I split lines and chars and I make a mask to show char by char in each lines, but in some letters like g, y, ... they have some part hidden. I can revert the splits after complete but you can see for a second that these letters have some parts hidden. Someone knows how to fix that? Thanks!

Hi! I'm having problems with some Vue components in Nuxt and SplitText. I'll try to explain: I have a global mixin that detects all [data-animation] elements with the scroll and fire an specific animation. Some of these elements are components and ha. This works fine when I use opacity, X and Y, scale, etc... but when I use Split Text it doesn't. I got an hydrate error and the animation doesn't work. This is the code for the animation: if (elm.dataset.animation === 'lines-down-up-mask'){ var split = new SplitText(elm, { type: "lines", linesClass: 'lineParent' }); var split_parent = new SplitText(elm.getElementsByClassName('lineParent'), { type: "lines", charsClass: 'lineChild' }); gsap.set(split_parent.lines, { y: '110%' }); gsap.to(split_parent.lines, { scrollTrigger: { trigger: elm, scrub: false, start: 'top bottom', }, stagger: { each: 0.1, ease: 'power1.in', y: 0, }, onComplete: function(){ split.revert(); } }); } This is one of the components: <Partners data-bg-color="white" data-text-color="black" data-logo-color="black" data-scroll-section :title="partnerList.title" :partners="partners" /> And inside the component I have this: <template> <section class="partners"> <div class="headline headline--4 partners__title" data-animation="lines-down-up-mask">{{ title }}</div> <MovingMarquee :images="partners" partner_logos /> </section> </template> I hope someone could help me, because I don't know why it happens :( Thanks