JustinNobles

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