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.