Jump to content
GreenSock

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

Angular & GSAP ScrollToPlugin

Recommended Posts

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

Edited by JustinNobles
Link to comment
Share on other sites

Hi Justin!

 

You should pass in the index...

<div class="box" (click)="scrollmthumbnail8(7)">8</div>

 

And then...

scrollmthumbnail8(index) {
  gsap.to(window, {
    scrollTo: { x: this.allMobileThumbnails.toArray()[index].nativeElement },
    ease: 'power4',
    duration: 2
  });
  console.log('scrollto--8th--Thumbnail');
}

 

  • Like 2
Link to comment
Share on other sites

this.allMobileThumbnails.toArray()[index].nativeElement

 

That's rather verbose. You can use the new selector util to simplify selecting an element. 

// Angular
@Component({ ... })
class MyComponent implements OnInit {

  constructor(public el: ElementRef) {
    this.q = gsap.utils.selector(el);
  }

  scrollTo() {    
    // uses this.el.nativeElement.querySelectorAll() internally
    gsap.to(window, {
      scrollTo: { x: this.q(".box-1") }
    });
  }
}

 

  • Like 2
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

Filter could work, but it returns an array...

let getThumbnail = this.allMobileThumbnails.filter(
      (item, index) => index === 5);

gsap.to(window, {
  scrollTo: { x: getThumbnail[0].nativeElement },
  ease: 'power4',
  duration: 2
});

 

Kind of superfluous when you can just grab the value directly from the array.

let index = 5;

gsap.to(window, {
  scrollTo: { x: this.allMobileThumbnails[index].nativeElement },
  ease: 'power4',
  duration: 2
});

 

20 hours ago, JustinNobles said:

how you solved that answer originally ?

 

I just thought of how I would solve it using vanilla JavaScript. It would be like this if you weren't using Angular.

 

let mobileThumbnails = gsap.utils.toArray(".mobileThumbnails");
let boxes = gsap.utils.toArray(".box");

boxes.forEach((box, index) => {
  box.addEventListener("click", () => {
    scrollTo(index);
  });
});

function scrollTo(index) {
  gsap.to(window, {
    scrollTo: {
      x: mobileThumbnails[index]
    }
  });
}

 

  • Like 2
Link to comment
Share on other sites

@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 

Link to comment
Share on other sites

You would need to calculate the minX value here, which would be the width and padding of all the panels combined. 

 

this.mobileDrag = new Draggable(this.mobileGallery.nativeElement, {
  type: 'x',
  bounds: {
    minX: -5000,
    maxX: 0,
    minY: 0,
    maxY: 0
  }
});

 

Quote
bounds [Element | String | Object] - To cause the draggable element to stay within the bounds of another DOM element (like a container), you can pass the element like bounds: document.getElementById("container") or a jQuery object is fine too, or even selector text like "#container". If you prefer, you can define bounds as a rectangle instead, like bounds: {top: 100, left: 0, width: 1000, height: 800} which is based on the parent’s coordinate system (top and left would be from the upper left corner of the parent). Or you can define specific maximum and minimum values like bounds: {minX: 10, maxX: 300, minY: 50, maxY: 500} or bounds: {minRotation: 0, maxRotation: 270}.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×