JustinNobles

I am getting these warnings below when trying to import the 'Seamlessly loop elements along the x-axis' Helper Function (draggable version) from the docs into my Angular 15 Project. I talked with an Angular Expert in a discord yesterday and we fixed all the errors I had caused on the Angular side. In my Angular project, I have an external js file where I copied/paste the function into, declared the external horizontalLoop function from the js file I created, and imported the gsap plugins in the component I am using. Was wondering what I need to do to remove this error below on the Greensock side. Do I need to buy the inertia plugin to fix these warnings for the loop to work as I was looking and saw the Helper Function example in the docs (draggable version) does use the inertia plugin in the codepen, if so that's not a problem for me, but I just would really like to incorporate this helper function into my project. Any help would be greatly appreciated

With that "Seamlessly loop elements along the x-axis" helper function that GSAP provides in the documentation, I am having trouble trying to convert the helper function into typescript to use in my project https://stackblitz.com/edit/angular-ivy-ajfpb3?file=src/app/app.component.ts

I want to loop the 3 images in my carousel after I drag my images using GSAP's Draggable, but I am confused on how to set this portion up. I have a stackblitz so far of the progress! https://stackblitz.com/edit/angular-ivy-ajfpb3?file=src/app/app.component.ts

@OSUblake Awesome appreciate the help and makes sense. I just have one more question with the bounds property. How would I make the gallery not drag to the left when it's on the first thumbnail as well as not drag to the right when it is on the last thumbnail so I won't have any overflowing whitespace

@OSUblake Wow, thank you! Appreciate it so much! What do I need to fundamentally learn to understand how you solved that answer originally ? Also, could .filter work in this scenario, as that was the one of the ways I tried experimenting to get this to work in the 4th button that I commented out

I am trying use the ScrollToPlugin to scroll to a certain thumbnail div in my imageGallery after a button is clicked in my footer, but I can't seem to grab a single element from my querylist to use with the ScrollToPlugin so I can scroll to the exact thumbnail. The only way I have it visually working is by putting a random number in the X value. Any help would be appreciated! I have a stackblitz instead of a codepen Here is the stackblitz: https://stackblitz.com/edit/ngforwithgsap?file=src/app/app.component.ts

Wow that is exactly what I was looking for. I would have never thought of having a paused animation like that thanks again! I just have a question on the equation + "vh" on the X value of galleryAnimation. In this example I have 5 thumbnails * 95vw = 475vw so I initially changed the equation to 475 + "vw" thinking it would work as 475vw but I didn't get the desired outcome. After fiddling with numbers I got it looking the way I needed it to but just wondering if you could break that down for me https://stackblitz.com/edit/scrollbargsapfinal?file=src/app/app.component.ts

That is awesome! Thank you so much. I took that same demo and tried to do my original side project and for some reason when implementing the dragging of my scrollbar div using gsap.to(".gallery", { x: -this.draggable.x }); to move my .gallery div caused alot of unexpected problems in the css as well as the typescript as my goal of understanding the original demo was to have a scrollbar div that moves a gallery horizontally on drag and scroll here is the main demo I was trying to achieve https://stackblitz.com/edit/angular-ivy-fyaz7w?file=src/app/app.component.ts

I still couldn't get it to work. I watched so many videos, looked at tons of tutorials, etc and couldn't figure it out. If you could please help me get this working I would greatly appreciate it

I had scrolltrigger.create() before but I keep getting Error: Cannot read property 'trigger' of undefined https://stackblitz.com/edit/angular-ivy-a2re99?file=src/app/app.component.ts

I implemented that draggable code you wrote in and tried to do the same for the scrolltrigger code it didn't work. Now I am getting the error Expected 0 arguments, but got 2. https://stackblitz.com/edit/angular-ivy-a2re99?file=src/app/app.component.ts

Here is the updated stackblitz after applying what you said. I only have one problem left as I can't wrap my head around it. I am getting the error Property 'trigger' does not exist on type 'AppComponent'. https://stackblitz.com/edit/angular-ivy-a2re99?file=src/app/app.component.ts

I am having trouble trying to recreate this codepen from codepen url above in angular. The scroll isn't moving together with the drag in the stackblitz demo when I converted the original codepen javascript code to typescript code. Here is the stackblitz I am using to recreate the codepen project in Angular. Any help would be appreciated! https://stackblitz.com/edit/angular-simultaneous-scrolltrigger-draggable?file=src/app/app.component.ts

Makes sense, that clarifies things thank you!!!

That fork is a great start for me though. I appreciate the feedback. This helps a lot. Thanks for pointing me in the right direction! Last question, what do you mean by synchronize?

here is the new codepen and for some reason none of my scrolltrigger code is working when i put it into a codepen but in my actual project it works fine thanks so far for the quick responses and help https://codepen.io/JustinNobles/pen/bGBQrGE

understandable trying to make another codepen right now. I thought it was a possible simple error on my end since it only dealt with gsaps scrolltrigger and gsaps draggable

The scrollbar and the horizontal scroll work both seperately but as soon as I drag the scrollbar my horizontal scrolling with scrolltrigger stops working

gsap.to(".gallery", { xPercent: -100, x: innerWidth, ease: "none", scrollTrigger: { trigger: ".gallery", start: "top top", end: () => innerWidth, scrub: true, pin: true, anticipatePin: 1 } });

Awesome, but now I ran into another problem that isn't in the codepen. I had a scrolltrigger that works horizontally but stops when I implemented the code above when I drag the scrollbar

the error is being thrown specifically on -this.x

Sweet sounds good. Also how do I get that code to work in typescript, because I am getting the error Property 'x' does not exist on type 'WorkComponent' gsap.to('.gallery', {x: -this.x})

yup that is PERFECT!!! Thank you so much. Also side question how do I find my previous forums that I have posted

How do I make my .gallery div move along with my custom scrollbar div to see the rest of my gallery that is past the 100 viewport width when I drag the scrollbar div to the left or right using Draggable? Any help would be appreciated

My main question is how to setup GSAP with Angular on the latest version of GSAP using Draggable to be specific