How to implement GSAP in a MDX file in Remix?

[xnslx]

Hello community,

I want to use the default mdx file/routes in my remix project, but within the mdx file, I want to integrate gsap to create some effects that on the left side is the pinned sidebar while the user can scroll the content on the right, anyway, I have a hard time wrapping my head around this issue how to implement it in the mdx file in remix. I know how to use gsap, i just don't get the idea how to implement gsap in the mdx file in remix? Could anyone guide me a direction? Thanks! Here is the sample article.one.mdx file under routes folder,

---
title: 'This is the title'
date: '2024-11-06'
author: 'Joe'
---

import { gsap } from 'gsap/dist/gsap';
import { useGSAP } from '@gsap/react';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

export const pinSidebarOnScroll = () => {
  useGSAP(() => {
    console.log('hello');
    ScrollTrigger.create({
      trigger: '.articleContainer',
      pin: '.stickyLeft',
      scrub: 2,
      start: 'top top',
      end: '+=100%',
    });
  });
};

<div className='flex lg:flex-row flex-col w-full bg-yellow-400 articleContainer'>
  <div className="bg-green-400 flex items-center justify-center h-screen stickyLeft w-full lg:w-1/2">
    <ul>
      <li>Step 1: Est nisi magna qui nulla.</li>
      <li>Step 2: Adipisicing qui non ame</li>
      <li>Step 3: Nulla elit eiusmod sint tempor laboris.</li>
    </ul>
  </div>
  <div  className='bg-red-400 prose-invert w-full'>
    <div>
      <h1>Building a Beautiful Landing Page</h1>
      <p>Creating a landing page that not only looks great but also performs well is crucial. In this guide, we’ll walk through a few essential steps to get there.</p>
      <h2>Step 1: Est nisi magna qui nulla.</h2>
      <p>
        Minim voluptate ea est elit aute quis dolore duis voluptate. Labore officia
        amet qui sunt exercitation officia ex id occaecat consequat commodo.
        Consectetur et mollit tempor aliquip magna laboris nostrud eu consequat sit
        cillum.{' '}
      </p>
      <p>
        Est nisi magna qui nulla. Adipisicing qui non amet commodo qui irure enim
        occaecat cillum. Tempor officia consequat est occaecat reprehenderit Lorem
        excepteur amet dolor ullamco nulla adipisicing voluptate. Adipisicing nisi ad
        tempor excepteur quis deserunt ex minim elit eiusmod ullamco. Dolore do
        pariatur tempor adipisicing incididunt cillum adipisicing excepteur in.
      </p>
      <p>
        Commodo labore veniam Lorem velit. Nulla elit eiusmod sint tempor laboris
        fugiat anim sint qui. In aliqua commodo mollit aute adipisicing proident culpa
        officia do nulla. Duis occaecat voluptate amet officia. Fugiat enim
        exercitation adipisicing velit sit.
      </p>
      <p>
        Minim qui sit occaecat dolore. Reprehenderit ullamco adipisicing elit ea ipsum
        fugiat veniam do voluptate adipisicing laboris ex laborum. Amet magna
        cupidatat cillum ullamco occaecat nulla duis Lorem irure ut Lorem dolor tempor
        aliquip. Et deserunt culpa labore ut irure exercitation ut elit sit voluptate.
        Velit adipisicing nostrud quis deserunt Lorem labore commodo consectetur
        cupidatat incididunt enim elit in. Cillum cupidatat sint nostrud labore ad
        amet sint excepteur dolor. Eiusmod labore aliqua elit minim enim id enim
        mollit esse Lorem culpa.{' '}
      </p>
      <h2>Step 2: Adipisicing qui non ame</h2>
      <p>Subtle animations can enhance user experience. Let’s add a smooth scrolling effect to emphasize important sections.</p>
      <p>
        Minim voluptate ea est elit aute quis dolore duis voluptate. Labore officia
        amet qui sunt exercitation officia ex id occaecat consequat commodo.
        Consectetur et mollit tempor aliquip magna laboris nostrud eu consequat sit
        cillum.{' '}
      </p>
      <p>
        Est nisi magna qui nulla. Adipisicing qui non amet commodo qui irure enim
        occaecat cillum. Tempor officia consequat est occaecat reprehenderit Lorem
        excepteur amet dolor ullamco nulla adipisicing voluptate. Adipisicing nisi ad
        tempor excepteur quis deserunt ex minim elit eiusmod ullamco. Dolore do
        pariatur tempor adipisicing incididunt cillum adipisicing excepteur in.
      </p>
      <p>
        Commodo labore veniam Lorem velit. Nulla elit eiusmod sint tempor laboris
        fugiat anim sint qui. In aliqua commodo mollit aute adipisicing proident culpa
        officia do nulla. Duis occaecat voluptate amet officia. Fugiat enim
        exercitation adipisicing velit sit.
      </p>
      <p>
        Minim qui sit occaecat dolore. Reprehenderit ullamco adipisicing elit ea ipsum
        fugiat veniam do voluptate adipisicing laboris ex laborum. Amet magna
        cupidatat cillum ullamco occaecat nulla duis Lorem irure ut Lorem dolor tempor
        aliquip. Et deserunt culpa labore ut irure exercitation ut elit sit voluptate.
        Velit adipisicing nostrud quis deserunt Lorem labore commodo consectetur
        cupidatat incididunt enim elit in. Cillum cupidatat sint nostrud labore ad
        amet sint excepteur dolor. Eiusmod labore aliqua elit minim enim id enim
        mollit esse Lorem culpa.{' '}
      </p>
      <h2>Step 3: Nulla elit eiusmod sint tempor laboris</h2>
      <p>labore ut irure exercitation ut elit sit voluptate.
        Velit adipisicing nostrud quis deserunt Lorem labore commodo consectetur
        cupidatat incididunt enim elit in.</p>

      ```jsx
      const Button = () => (
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Get Started
        </button>
      );
      ```

  </div>
  </div>
</div>

[devs9]

@xnslx Hey 👋 As a possible solution, I think you can move the implementation with gsap to the component file and then use it in mdx

[xnslx]

Hey @devs9 , sorry for the late reply. Finally I figured it out. You need to have a separate component to handle the gsap stuff and then import back to the mdx file. I wrote two articles documenting this.

Here is the link,