nicolaseielll

Hello, I have this draggable feature on my slider but I also want previous and next controls to it so I added basic gsap.to() to the buttons which translates the slider to wanted direction but it goes over the boundaries I have set in the Draggable config object. My question: is there a way to connect the prev/next controls to the Draggable boundaries so that the slider doesn't go past them and if not is there a way to set the boundaries some other way? Here's my draggable object: var draggable = new Draggable('#slides-inner', { trigger: '.slides-container', type:"x", bounds: { minX:0, maxX: -wrapWidth + windowWidth + 20 }, inertia: true, }); And here's the prev/next animation: function animateSlides(direction) { var x = direction * slideWidth; gsap.to('#slides-inner', { x: x, ease: 'Power3.easeInOut' }) }

Could maybe someone provide a simple demo of gsap.utils.wrap()?

Did you take a look at this: https://codesandbox.io/s/loving-snowflake-i8ys9g?file=/nuxt.config.js. My problem now is that the slides wrap incorrectly. Thats basically it, everything else seems to work. Is there a simple fix to that or does it require more work? I think this is the line that has to be changed: (on line 59) var wrap = gsap.utils.wrap(-100, (numSlides - 4) * 100); But I understand if it is too much to ask in here!

Hello guys, I'm trying to create a slider with the same functionality as in this slider: https://codepen.io/GreenSock/pen/GRJwLNP but implemented to this slider: https://codesandbox.io/s/loving-snowflake-i8ys9g?file=/nuxt.config.js. Now the problem is that I don't understand all the code in that demo so it is hard to apply it to other demos when you don't know what exactly is going on there. What would I need to be changed so that it would work with my slider? On a single click the slider should move the width of one slide + the padding. I have pasted the code to my demo and set the correct IDs so that the function is connected to the slider.

I added pinType: "fixed" to the scrollTrigger object and it got better on mobile but now it does't work on desktop

Yes, "version": "3.10.4",

I tried, it did not:( How can I make sure I don't? At least this is what my package.json says: "gsap": "npm:@gsap/shockingly@^3.10.4",

It works in codesandbox on IOS but when I try it on the original website (https://xos-website.vercel.app/) it lags even more with normalizeScroll:( very weird... Did you add anything else than this?: ScrollTrigger.normalizeScroll(true);

Yeah sure, here's a minimal recreation: https://codesandbox.io/s/solitary-architecture-gprii8?file=/pages/index.vue

Yes I have, it didn't have any effect:( I have also tried it on other devices but it does not get better. Is there anything strange with my code if you check the /* layer effect */ section from the mounted() ?

I solved the problem partially by setting the smoothTouch to 0 but the pinned section is still pretty laggy. I tried taking the images off completely but it didn't have any effect. What could be causing this behavior: Here's the sandbox of the problem: https://codesandbox.io/s/solitary-architecture-gprii8 try it on a mobile device, on desktop there's no problem Here's a screen record of the pinned section so you can compare it to the desktop version:

I'll just try to make a codesandbox of the whole lander

Does this indicate to anything: When I scroll with my mousepad on my computer, the scrolling is smooth and works great but when I try to swipe the screen in the dev tools just how you would do on a mobile device the smooth-content transform changes from transform: matrix3d() to translateY(0px) back and forth. (but scrolling with two fingers the transform stays in matrix3d)

Thank you for these suggestions! I'll try them!

I have created a website with the help of gsap scrollSmoother plugin and it works very well on desktop but on mobile it is a bit laggy and the user experience suffers bc of that. Is there something I could do to fix this? Here's the demo domain so you can try it on mobile and desktop: https://xos-website.vercel.app/ I would make a codepen for this issue but Im not sure what to put there because I'm not sure what exactly is causing it. Thanks in advance!

I really appreciate your time you put into this, thank you for that! It works now.

I forked the project once again and added a second page to it and tried the same thing there but the animations did't work there either after navigating back to the home page even tho it has the observer. https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-forked-x09mh8?file=/pages/test.vue

Is there a way I could run this inside the page component because I have my scrollSmoother in the nuxt default layout so I don't have to define the smoother on every page? I tried to put that inside watch: {"route"() {}} so it would run every time a route changes inside the layout but it did not help. So is it necessary to put it in the page component for it to work?

Ok I got somthing now: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-js-starter-forked-3pst93?file=/pages/index.vue So theres the green box which has this parallax effect and if you navigate to Test page and back, it stops working. (btw sorry for my english).

I tried but it seems that I don't have enough experience to work with that setup. It is way more complicated than mine and I could not understand what is going on in there. The code that I sent in a screenshot is all I have to set up the scrollSmoother & parallax effect so there's nothing more to show. And I described where the code is located as well. Can you figure out anything based of it? It would be very helpful.

Hello guys! First of all I really appreciate your help here on the GreenSock Forum! It really helps me out! The question: I have a scrollSmoother parallax effect set to few images on the front page but it stops working after I navigate to another page and back. I have tried this.$ScrollSmoother.refresh() but it seems to have no effect on the animation. My site is built on Nuxt.js and my scrollSmoother is located in the layouts of the project. This is my scrollSmoother object and the parallax effect:

Thanks a lot, it works now! Now I got my blur effect back!

Ok I found that this piece of css was messing up the smooth scroll and every gsap animation: filter: blur(15vw) I have no idea why it is messing things up but taking it off fixes everything.

Hello guys, my site works perfectly on Chrome but when I switch to Safari, the smooth scroll and other animations get very very laggy and the site becomes basically unusable. Is there something I could do to prevent this?