Drag to scroll

[usheeen]

I'm currently investigating migrating from Framer API / Motion to GSAP.

 

Is there a straightforward way to replicate Framer's Scroll component -  basically this component automatically provides scrolling and dragging of its contents.

 

It's been a couple of years since I last used GSAP so thought there might have been convenience functionality added for this since.

 

https://codesandbox.io/s/scroll-forked-ieylz

[ZachSaucier]

Hey usheeen. 

 

2 hours ago, usheeen said:

I'm currently investigating migrating from Framer API / Motion to GSAP.

Smart move if you need more flexibility  Framer is more limited in what it can do.

 

2 hours ago, usheeen said:

Is there a straightforward way to replicate Framer's Scroll component -  basically this component automatically provides scrolling and dragging of its contents.

GSAP isn't declarative but you can definitely do that with GSAP! 

1. Absolutely position the container of the content that you want to be draggable/scrollable.
2. Create an animation to translate the container's y position from the start to the end value. Pause it so it doesn't run on load. This can easily be done with the following:

   const scrollAnim = gsap.to(container, {
     yPercent: -100,
     y: () => innerHeight,
     ease: "none",
     paused: true
   });

3. Connect that animation to the page's scroll position (probably using GSAP's ScrollTrigger)

   ScrollTrigger.create({
     trigger: container,
     start: "top bottom",
     end: "bottom bottom",
     scrub: true,
     invalidateOnRefresh: true,
     animation: scrollAnim
   });

   and drag (probably using GSAP's Draggable) that updates the scroll position (like this demo does). It'd likely be best to use a proxy element so you're not affecting any y values with the drag (since you want to be updating the scroll position instead).

If you run into issues feel free to ask and we'll do our best to help.

[usheeen]

Thanks Zach,

 

I'll give that a try - I mostly wanted to make sure I wasn't missing new functionality as GSAP has expanded quite a bit since I last checked in. Excited to revisit this amazing library.