Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by nicolaseielll

  1. Hello, I was updating the height at a wrong time. I set the refresh function inside gsap's onComplete and now it updates it just how I wanted!
  2. Is there a way to refresh the SmoothScroller wrapper height when the content height changes? I have collapsible panels on the site so the content height changes depending on how many panels there is or how many are open at the same time. If I only let the user have one open at a moment is still does't remove the issue because there are multiple folders which contains a different amount of these panels which the user can navigate between. I tried refreshing ScrollTrigger & ScrollSmoother after the panel animation is done but the height stays the same. The wrapper height update works on route change tho but now I'm trying to update it while user is interacting with the site.
  3. I removed Split Text and it works fine but now I don't have the animation:( I'll try to figure this out and post it here If I come up with something.
  4. I have a sentence animated with gsap split text plugin and it works fine on desktop but on mobile the gradient text disappears. If I remove the split text from the sentence it works but after pluggin split text it stops working. What could be causing this? I have reproduced the problem here to a simple demo: https://codesandbox.io/s/recursing-alex-xt02xk?file=/src/index.js Try to open this demo with phone so you can see the problem. Any hints are greatly appreciated!
  5. It seems like we don't have access anymore to the Vue instance via import Vue from 'vue'.
  6. @GreenSock Hi, yes the sandbox I provided has been done with nuxt 2. I can try to reproduce the problem with nuxt 3.
  7. Hi guys, I have recently started using Nuxt 3. Now I got to a point where I wanted to add ScrollSmoother to my new Nuxt 3 site but somehow this: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-pbhmeh?file=/components/GSAPScrollSmoother.vue component wont work on Nuxt 3 no more. I tried to swap data() to setup() but it has no effect:( Can anyone spot a reason why it's not working on Nuxt 3. In Nuxt 2 this component works perfectly! If there is any changes to the component, maybe you could add them to this post! Thanks in advance!
  8. I have one problem: if I wanted to scrub the slider with ScrollTrigger, what do I put to the x: in the gsap.to() object ? I tried the loop.next() which is used by the click event but that did not have any effect. A hint is enough so I'll try to figure the rest by my self so I don't bother you too much.
  9. Very good explanation! Thank you for this. I'll take a look at the helper function!
  10. Im trying to create a scrub image slider and I would need it to be infinite. Im trying to wrap the slide to the end of the array using gsap.utils.wrap every time it passes the border of the slider (when it is hidden) but I cannot get it to work. Could someone help me with this? Here's a simple demo: https://codesandbox.io/s/wonderful-monad-sohfp8?file=/pages/index.vue
  11. I have smooth scroll configured to my project but the scroll gets laggy on mobile devices if normalizeScroll is set to true so I was wondering if there's a way to switch it to false if user is on a mobile device. I tried this and it changes the boolean but the normalizeScroll wont switch conditionally. if(window.innerWidth < 960) { this.normalizeScroll = false } else { this.normalizeScroll = true } this.$scrollSmoother.refresh() Here's a codesandbox with the same setup I have in my project: https://codesandbox.io/s/gifted-sea-6rybt5?file=/layouts/default.vue
  12. Hello, I solved this by using getBoundingClientRect. First I get the sliderPosition and check how far it is from the max or min value (depends are you clicking previous or next) then if the slider is more than X away from the min or max value it translates X amount to the left or right but if it is closer than X it translates the space left between the slider and max or min value so the slider never gets past the boundaries.
  13. 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' }) }
  14. Could maybe someone provide a simple demo of gsap.utils.wrap()?
  15. 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!
  16. 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.
  17. I added pinType: "fixed" to the scrollTrigger object and it got better on mobile but now it does't work on desktop
  18. 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",
  19. 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);
  20. Yeah sure, here's a minimal recreation: https://codesandbox.io/s/solitary-architecture-gprii8?file=/pages/index.vue
  21. 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() ?
  22. 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:
  23. I'll just try to make a codesandbox of the whole lander