Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • 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. 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.
  2. Very good explanation! Thank you for this. I'll take a look at the helper function!
  3. 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
  4. 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
  5. 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.
  6. 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' }) }
  7. Could maybe someone provide a simple demo of gsap.utils.wrap()?
  8. 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!
  9. 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.
  10. I added pinType: "fixed" to the scrollTrigger object and it got better on mobile but now it does't work on desktop
  11. 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",
  12. 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);
  13. Yeah sure, here's a minimal recreation: https://codesandbox.io/s/solitary-architecture-gprii8?file=/pages/index.vue
  14. 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() ?