horizontal scroll Implementing Horizontal Scroll with more control

[adityanithariya]

I'm trying to achieve an effect, which is a recreation of aimane.dev, it's developed in threejs, but should definitely be achievable using GSAP. Horizontal scroll is in place using ScrollTrigger and translate animation, checkout the current version here. But lacks many key things to make it smooth and presentable, not able to understand how to configure things for those animations. Includes:

• Card should expand bidirectionally, staying static at it's place, or we can say as smooth as possible
• First card and last card expands with keeping it's center as starting and ending point for scroll animation, similar for other cards too

I'm not trying to give a requirement list to discuss things to fulfill it, but to know the possibilities around GSAP to tackle horizontal scroll with more control and flexibility achieving such things. I tried using translateX as key property to animate horizontal scroll, but it doesn't work as static value for x doesn't work when we have cards expanded, along with it not able to expand first card with keeping the scroll start as it's center as translateX uses top left corner as the reference point. Checked out docs for dynamic value of x, but by populating state into the gsap call for dynamic value of x doesn't work either.

 

useEffect(() => {
    const horizontalSections = gsap.utils.toArray(".horizontal")
    const cardWidth = 200
    const offset = window.innerWidth / 2 - cardWidth / 2
    gsap.set(horizontalSections, {
        x: offset,
    })
    gsap.to(horizontalSections, {
        x: offset - (cardWidth + 40) * 5 + 40,
        ease: "none",
        scrollTrigger: {
            trigger: ".horizontal",
            end: "+=1200",
            markers: true,
            start: `top ${window.innerHeight * 0.2}px`,
            pin: true,
            scrub: 1,
            anticipatePin: 1,
        },
    })
}, [])

 

 

I hope the problem is clear, to have more control over elements when using horizontal scroll with ScrollTrigger, using translateX or any other better alternative, please let me know if more context needed.

Thanks in Advance!

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Also I see you're using React. Proper cleanup is very important with frameworks, but especially with React. React 18+ runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[adityanithariya]

I agree, a minimum reproducible example is a must to identify and resolve the issue. Please checkout stackblitz project here, forked from Next.js starters. Thank you so much for useGSAP use cases and react guide to include, it was really helpful in employing best practices.

Based on useGSAP config capabilities, tried using state as deps in implementation, but it broke the UI somehow. Please checkout demo for resolution.
Thanks again, really appreciate your help!

[GSAP Helper]

You didn't register useGSAP and it looks like the way you're setting things up you'd have to set the revertOnUpdate: true option:

useGSAP(() => {
  // code...
}, {dependencies: [expanded], revertOnUpdate: true});

https://stackblitz.com/edit/stackblitz-starters-6wfar14v?file=app%2Fpage.tsx

 

But to accomplish all your goals, there's probably a lot more logic you'll have to work through. It doesn't even look like you're doing the animations with GSAP. That reference site you linked to definitely uses GSAP, so obviously this is all entirely possible to do...it's just a matter of wiring up all the custom logic. Hopefully this at least gets you unstuck. Good luck!

[adityanithariya]

After implementing the suggestions, and adding revertOnUpdate, animation works with expanding panel and I'm able to add recalculations, but animation starts from beginning, jumping to the start, should I use scrollTo to keep track of last scroll position and rescrolling to it, but this doesn't seem to be a real solution which could be there using GSAP. Reference site is created using threejs, where the animated cards are inside a canvas, but I'm trying to replicate it using GSAP. I believe it's replicable, if right tools are known!

I tried doing recalculations for translate for each card, it didn't seems to work (please check demo for the same), currently it's done collectively, can you suggest how we can do calculations for each card separately, keeping it smooth. And if you can give some suggestions over transitioning the expansion and keeping cards static, it would be much more helpful to proceed with!

[GSAP Helper]

That site you referenced certainly uses GSAP to do the effect - Three.js is just the rendering layer.

 

What you're trying to do is totally possible, but it requires a lot of working through the custom logic. Perhaps someone in these forums is willing to do that with you... I just want to set your expectations properly and let you know that it may not happen here. It's a lot to ask. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

From a cursory glance, you probably want to take a fundamentally different approach that doesn't require revertOnUpdate. Currently, you're making state changes immediately with the expanded variable that causes re-rendering and new CSS classes. It'd probably be much better to not cause a re-render or class changes that suddenly alter layout, but instead leverage GSAP to animate those changes. 

 

For example, instead of swapping in min-w-[500px] w-[500px] classes, animate the width property with GSAP. 

 

Good luck! I hope that gets you going in the right direction. 👍

[Rodrigo]

Hi,

 

Maybe the demos by @OSUblake and @GreenSock in these threads could help:

 

Happy Tweening!