[How to make a custom slider]

https://drive.google.com/file/d/1iYWYBr7AQ9dYOl_ksKXr_-_Zvkbd8ywa/view?usp=sharing

how do I make this slider using GSAP. what features I should use

[Planning to build a Parallax Tour and Travels Website]

Hi Everyone,
I recently recieved a project for a tour and travels website. I was scrolling through many design and thought of creating a parallax website with 3D models, but I haven't created any up until now. So I needed some suggestions on how to start and where to get the resources.
Also, will there be any performance issues when hosting the website. (Website is not Dynamic, More like a Gallery type for an agency). 

How do I optimize the performance of the website while building it?

What thinks should I be aware of?
Any suggestions will be helpful.

Thank You.

[Slow Animations]

Does the context optimize the animation rendering?
Here is the link to the demo

Demo

[Slow Animations]

So I have created a component transition animation which works perfectly fine on local machine but when i deploy the website on vercel, the animation is very slow. Is there some way to optimize the animation?

 

import React,{useEffect}from 'react'
import { useNavigate } from 'react-router-dom';
import { locationBg } from '../../assets'
import useLocationContext from '../../hooks/useLocationContext';
import { gsap } from 'gsap';


import MobileFrame from './MobileFrame';

const Location = () => {

    const navigate = useNavigate();

      // Destructing variables from the Location Context
    const { data,setData, setHasSearched, setInputValue, setSelectedCountry } = useLocationContext();


    useEffect(() => {
      const tl = gsap.timeline();
    
      // Animate the Location component
      tl.fromTo('.LocationAnimationClass', 
        { opacity: 50, y: 1200 }, // From
        { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } // To
      );
    
      // Animate the MobileFrame component
      tl.fromTo('.MobileFrameClass', 
        { x: '-600%', opacity: 20 }, 
        { x: '0%', opacity: 1, duration: 1.8, ease: 'bounce.out' }, 
        '+=0.2' 
      );

      tl.fromTo('.ButtonAnimationClass', 
    { y: '400%', opacity: 0 }, 
    { y: '0%', opacity: 1, duration: 1, ease: 'bounce.out' }, 
    '+=0.2'
  );
    }, []);
    
 
    // This useEffect is used for handling error on the location page
    useEffect(() => {
        if (!data) {
            navigate('/');
        }

        return () => {
            setHasSearched(false);
        };
    }, [data, navigate, setHasSearched]);

   

    
//  This function is handling the reset Button
    const handleReset = () => {
        setData(null)
        setSelectedCountry(null)
        setInputValue(null);
        navigate('/');
    }



  return (
    <>
    
    <div className='LocationAnimationClass overflow-hidden relative h-screen flex flex-col gap-[30px] md:gap-[40px] xl:gap-[20px] 2xl:gap-[90px] justify-center items-center bg-cover bg-center'
    style={{backgroundImage: `url(${locationBg})`}}>
    <div className='bg-black w-full h-full bg-opacity-30 absolute top-0 left-0'></div>

      <div className='MobileFrameClass'>
         <MobileFrame/>
      </div>
       

        <button
          className="ButtonAnimationClass bg-[#33c2cc] px-10 py-3 rounded-full font-noto-sans font-semibold text-3xl z-10 text-white"
          onClick={handleReset}
        >
          Reset
        </button>
    </div>
    </>
  )
}

export default Location

 

[Unable to Specifically Trigger the scroll]

Thank you for the reply , Here is the Code Link  but there was some runtime error , so I was not able to compile it but the rest of the code is give in this, let me know if there is some fix. Thank you

[Unable to Specifically Trigger the scroll]

page.jsx
In the Emotion Section , I tried implementing scroll trigger, it is my first time using it and I watched some videos before using it but i'm unable to trigger the scroll at desired point. The whole viewport scrolls even when the scroll is triggered