Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by JustinNobles

  1. 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
  2. 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
  3. @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
  4. @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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. Makes sense, that clarifies things thank you!!!
  14. 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?
  15. 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
  16. 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
  17. The scrollbar and the horizontal scroll work both seperately but as soon as I drag the scrollbar my horizontal scrolling with scrolltrigger stops working
  18. gsap.to(".gallery", { xPercent: -100, x: innerWidth, ease: "none", scrollTrigger: { trigger: ".gallery", start: "top top", end: () => innerWidth, scrub: true, pin: true, anticipatePin: 1 } });
  19. 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
  20. the error is being thrown specifically on -this.x
  21. 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})
  22. yup that is PERFECT!!! Thank you so much. Also side question how do I find my previous forums that I have posted
  23. 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
  24. My main question is how to setup GSAP with Angular on the latest version of GSAP using Draggable to be specific
  25. I have been trouble setting up Draggable with Angular. I found a stackblitz that worked, with draggable but was an older version as I duplicated the code and it didn't work specifically with imports. I have seen forums saying to put import gsap from "gsap" with gsap.registerPlugin(Draggable); which seems straightforward but when I did that in a simple application using GSAP it doesn't work. Any help would be appreciated! This is the stackblitz where Draggable works with Angular + GSAP that doesn't work with a newer version of GSAP https://stackblitz.com/edit/angular-kyfkfu?file=package.json