Jump to content


  • Posts

  • Joined

  • Last visited

About nicolaseielll

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

nicolaseielll's Achievements

  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!