nicolaseielll

It seems to be working better after I added spacers to the sides of the logo instead of padding but it still seems to break completely after route change.

I'm trying to create a logo slider with the horizontalLoop helper function, my problem is that the logos are different widths & I would need the spacings between them to be equal so that they would not seem uneven. This requires the boxes to be the width of the logos but the slider breaks if I take the static width off from CSS. Is there a simple solution to this or would it require editing the original loop function? Here's a simple demo of the problem:https://stackblitz.com/edit/nuxt-starter-ejwuh5?file=components%2FSlider.vue I tried to make it as simple as possible, you can try to add/remove the width from the box to see the problem. Thank you guys in advance, I really appreciate what you're doing with this platform!

Thank you so much! It works now! I was also missing the onBeforeEnter gsap.set().

Hey, I have recently started to dig into Nuxt 3 javascript page transitions with gsap and I am unable to get this simple javascript fade transition to work properly. There must be something that I don't understand here since I'm assuming that the hooks & the animations are correctly setup to the transitionConfig.js but it still does not fade smoothly to the next page, the leave animation looks good but onEnter doesn't. I forked the Nuxt 3 page transition project on Stackblitz to match the setup in my local setup so I managed to reproduce the problem here: https://stackblitz.com/edit/nuxt-starter-sgqvct?file=helpers%2FtransitionConfig.js

Thats perfect but the scrolling stops for a while after dragging Is there a way to ease it to the automatic scrolling speed so that it does't stop?

Is it possible to achieve this exact functionality with the helper function, the draggable feature with inertia would be needed in my case also + the automatic scroll: https://codepen.io/animaticss/pen/JjeGgyV The only problem with this pen is that it does not work if I use vw as the base font-size unit because the boxes are absolutely positioned. I would just have to reposition the boxes somehow without restarting the whole animation but I don't know how

Hey, I'm trying to create an infinite slider but I'm unable to get it working after resize. The slider works great before resizing tho. Here's a simplified demo of the problem: I have separated the wrappers with colors so it is easier to see whats happening. https://codesandbox.io/s/silly-star-87kp94?file=/src/views/Home.vue:0-2690 I have tried to update the wrapWidth and the position directly inside the animation modifiers on resize but nothing seems to have any effect. Keep in mind that my project uses VW as a base font-size unit so everything scales based of the screen width so that might change the dynamic of the recalculating. Do you guys have any tips or tricks for this??

Thank you for this! It helped me figure out the real problem since I built the whole component again on this template you provided. The component works perfectly on a separate empty page but when I transfer the code to the actual page where the component should be, the resizing is still slightly off. So I guess because there's so much stuff to resize it takes a while for the browser to put everything in place so the invalidateOnRefresh gets the wrong values of the page which is still "resizing". So my question: is it possible to delay the invalidateOnRefresh or delay the calculation in some other way?

I have a problem with calculating the correct end value to scrollTrigger after a screen resize. On the initial page load the trigger end value is correct but after trying to create the scrollTrigger again with the new values, the pin breaks. I have tried kill() and create() the scrollTrigger again and making sure that the values are calculated before initializing the scrollTrigger again but nothing seems to work. I logged the end value of the scrollTrigger after calculating and the value does update, but why is the value wrong if it is correct on the initial load? This led to wrapping the ScrollTrigger.create() inside a setTimeout but it had no effect either. Here's a simple demo of the issue: https://codesandbox.io/s/kind-waterfall-wkd5bj?file=/pages/index.vue In the actual project I'm using VW as a base font-size so thats why the box is set to the unit as well so it demonstrates the original project better.

I created this animated pin section on my clients site & it works perfectly on chromium borwsers but when I go check safari, it just does not work. The pin starts at a wrong position & the border radius disappears of the element. Is this a common bug with safari or am I just a bad developer? You can try the section here on chrome vs safari: https://themia.world/businesses

Hello, I found a solution! I simply replaced the " " with "‌" and it started working!

I was too quick to celebrate. I cannot get it to work in that nuxt project in codesandbox. I also tried to set the innerHtml via javascript and not via using v-html but it did not have any effect. If you try, are you able to get it working in the demo I provided? I have the exact same setup in local project.

Hello, I'm trying to animate a longer paragraph which requires some divisions between the lines but I cannot get the <br> tags to work how I want. I created a codesandbox to demonstrate the problem: https://codesandbox.io/s/weathered-glade-pb7shz?file=/pages/index.vue I'm using v-html to inject the text. Thanks in advance!

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!

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.

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.

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!

It seems like we don't have access anymore to the Vue instance via import Vue from 'vue'.

@GreenSock Hi, yes the sandbox I provided has been done with nuxt 2. I can try to reproduce the problem with nuxt 3.

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!

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.

Very good explanation! Thank you for this. I'll take a look at the helper function!

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

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

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.