JustinNobles
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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 achievehttps://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!
See the Pen 896549f0a83297debd9111fe9b205a97 by GreenSock (@GreenSock) on CodePen
-
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
-
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
See the Pen bGBQrGE by JustinNobles (@JustinNobles) on CodePen
-
My main question is how to setup GSAP with Angular on the latest version of GSAP using Draggable to be specific
Importing 'Seamlessly loop elements along the x-axis' Helper Function
in GSAP
Posted
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