Vander

Thanks for your response. As you can see in the console, this component's console's log are running after the page transition (swup). I think this is correct. I'm also trying to revert() the splittext to the original state on unmount the component and beforeUnmount, just in case, but the component is still without text after page transitioning... ? Does anybody know what could I try? Many thanks

Hi there! I'm using astro + https://vuejs.org/ components and swup.js for page transitions. I'm also using GSAP for animations I've found a problem while navigating. On first load, text in "TransformAnimation.vue" prints with animation and everything looks and works cool. If I then go to some other page (About, blog..) the text disappears even though js runs and works correctly I thought it was because of swup, but I've seen that if I comment/delete the SplitText GSAP part, the text always appear... I don't get why my GSAP code is deleting the text? :/ I leave a minimal demo(thanks @GreenSock): https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Fblog%2Findex.astro,src%2Fcomponents%2FTransformAnimation.vue,src%2Fcomponents%2FHeader.astro Thanks!

Thanks! Didn't know about this Could you help me by importing SplitText? Do you see any error on my TransformAnimation.vue component? I see some errors in console but i dont know how to fix them (I need glasses maybe ? ) but i can't run my app (pnpm dev) https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Fcomponents%2FTransformAnimation.vue,src%2Fpages%2Findex.astro Thanks!

Is it possible to use Premium plugins in stackblitz platform? I'm trying to recreate something to get some help from other people but i'm afraid they can get my token

Hi! I've seen an animation made with Swiper.js (i think) which I'd like to replicate just using ScrollTrigger, but found some questions/doubts. The animation is here (https://fuegocaminaconmigo.com/projects/) and i think i'd just scrolltrigger a section with images, pin it to the top, and scroll horizontally will get similar effect of this one (am I right?). (Currently idk why isn't working on my codepen haha) Then, the tricky stuff i don't see how to do it, is to dwarf the blocks/slides with the scroll while moving horizontally. Can any one gimme some advice or help me?

Which one?

Yeah, changing the import to gsap/dist/SplitText makes it work. Is this an error from astro then? Should I write them? Thanks

Sure, i'll try to change the import statement as soon as I arrive at my work computer tomorrow morning(I forgot to push changes to git lol) I think i've tried the ".js" ending, but was failing also. I'll also try it! About the account, yeah, i signed up in my work account. I like to have stuff separate in my personal acc and my working acc I'll keep you updated, thanks! :)

Hello buds I think i've found an error using astro and gsap(?). I've found something similar in Nuxt but I wasn't able to solve it by myself (sorry :/ ) Thing is, i've registered SplitText plugin and created and astro component, imported module and everything was working ok. Then, I translated the astro component to Vue component and my problems appeared. I get an error saying "Cannot use import statement outside a module", but i added "type="module" to the component and package.json and still getting the error I'm not sharing my .npmrc file for obvious reasons haha Does anyone know how to solve it or what i'm doing wrong? Thanks! package.json: Vue component: Error: More info about the error:

Many thanks @Cassie I didn't see the typos! Yeah i'll go further with the stagger logic thanks

Hi there! I'm trying to controll stagger animation with the scroll, triggering the animation when, for example, the top of the wrapper containers hits the 75% of the screen and ending it when it reaches the center of the screen, but it triggers when you reload the page. I'd like to link the animation to the scroll Also is there any way more than one square can be hidden? now i'm hiding them one by one and i'd like to stagger them at least 5 at the same time, is it possible? Many thanks for your help

Many thanks @GreenSock Could be one solution but i think it's not really what i'm looking for, cause it's position is random when you refresh and you can't control where they will go I'll dive in and search for a collision detection to stack elements one above the other one when they fall, also it's strange when the (for example) orange circle stops before the yellow one reaches the bottom Do you know if maybe working with another plugin and physics would help? Or any funny idea? I'm a bit flexible about it but can't find a consistent solution (I can use your premium plugins also!) Have a good morning guys

Yes, as you said Y property does nothing ? yProp just let you modify the name of that prop but nothing else or am I misunderstanding? Can't get a good way to achieve what I'm trying. Maybe is there a way to make them drop to the bottom of the page and stack on top of each other in order of arrival but not with that plugin and it should be with custom code, nope? Thanks again for your support, @mvaneijgen

Oh, good to know this duration stuff, i thought that if you just use the default duration, the animation happens faster and that's all. On the other hand, the svg paths/circles seems not to go to initial position: (y:0 or the position the svg gets if you comment all js code) Any idea? Thanks

Hi there, I was playing with Physics2D plugin but I think i'm not understanding how it works... For example, I have an svg with multiple circles and I wanted to set them to higher position, and then, let them fall with gravity and different velocities to the initial position when the user reaches a certain page point. (I'll do it later with a timeline, i think that's not a problem). I thought that just by setting a, per example, Y: -1000 to elements and then move the tween to position y: 0 and add a velocity, angle, gravity, etc.. would it work but can't get the result I want. I'm missing something? Or did I understand it wrong? Can anyone explain me what's not working or show me a demo explaining how does the plugin works? Codepen's attached Many thanks!

Hi there, I've found a demo from Gsap working with scrollTrigger, but I wanted to change some stuff which i've not been able to. I want to achieve that when i scroll, some sections appear from some side (previously indicated) and once pinned, run a function (if there's hidden text) that fades out the actual visible text and fades in the next hidden text, and same with the third hidden text. Once done with the third text, continue with scrolling sections... Should i create a scrollTrigger for every section then? Is it possible to achieve it? I've been trying to do it with the codepen attached... And also i viewed something similar with locomotiveScroll, but i'd like to do it with only scrolltrigger Many thanks

Hi Jack, yes, i wanted to say Draggable but I was distracted and wrote InertiaPlugin haha I'll try what you say Thanks

Hi there! I've searching for some information about inertia plugin and if it would be possible to move more than one element at the same time and found nothing :/ The idea was to select some elements (for example with cmd+click) and then grab them and move them at the same time. In the codepen above i've made an example with hexagons(open it in codepen/new tab for better performance), you should click on the left list to add some of them... Could this be achieved with gsap and intertia plugin? Many thanks

Hi y'all! I've been trying for a few days to get my sections working horizontally and vertically (https://codepen.io/EricCV/pen/wvPQXKB?editors=0010) with snap to the next or prev section(depending if you're scrolling down or up), but i'm not able to get it My logic tells me that it is not possible at all to have the first scrolled animation (the blue/white/orange svg) and then snap the sections but i'm not an expert and I tried everything? I only make it work in one direction, not both (https://codepen.io/EricCV/pen/JjOeZPL?editors=0010) Another option could be to do it in this way (https://codepen.io/EricCV/pen/dyZQKKE) but snapping the slides Any idea to try something? I'm stuck and I need some push I've created three different codepens to show the options I've tried to achieve it... Any help would be appreciated... Also any feedback to improve my gsap code would be perfect Many thanks