usheeen Posted September 8, 2020 Share Posted September 8, 2020 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 More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 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! Absolutely position the container of the content that you want to be draggable/scrollable. 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 }); 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. 1 Link to comment Share on other sites More sharing options...
usheeen Posted September 8, 2020 Author Share Posted September 8, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now