Jump to content
GreenSock

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

JustinNobles

Members
  • Posts

    32
  • Joined

  • Last visited

Posts posted by JustinNobles

  1. @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 

  2. @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

  3. 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

  4. 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

  5. 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

  6. 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

    See the Pen 896549f0a83297debd9111fe9b205a97 by GreenSock (@GreenSock) on CodePen

  7.  gsap.to(".gallery", {

              xPercent: -100,

              x: innerWidth,

              ease: "none",

              scrollTrigger: {

                trigger: ".gallery",

                start: "top top",

                end: () => innerWidth,

                scrub: true,

                pin: true,

                anticipatePin: 1

              }

            });

  8. 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

×