Jump to content
GreenSock

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

Drag to scroll

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

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