If You are a web developer you must have seen those insane websites with all those fancy animations and you always think how do you make these animations, well most of these website uses JS animation libraries.

Some of the most popular libraries for animations are

• Framer-motion
• GSAP
• ThreeJS
• Anime.js

but today we'll be taking a look at GSAP and will be creating an infinite scroll banner in it. this is a very simple build to make you familiar with GSAP and its terms.

Let's get started with a starter project on CodeSandBox with GSAP initialized

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Infinite Scroll banner</h1>
      <h2>Banner goes here</h2>
    </div>
  );
}

now let's set up basic HTML and CSS for the banner before animating it.

After this, we will add the following code

  const bannerRef = useRef()  
  const slider = gsap.timeline({
    repeat : -1,
  })

We will create a Reference using useRef for the element we are trying to animate and we will create a variable called slider which will initialize a gsap timeline. the timeline will help us to define the animation for the element, repeat -1 tells the gsap that we want to run the animation infinitely

  useEffect(() => {
    slider
    .set(bannerRef.current, {x : 0})
    .to(bannerRef.current, {x: -250, duration:3, ease:"linear"})
  })

We will then add the animation to the useEffect without any dependencies so the effect can run in a loop, .set will set the initial animation on load and .to will be the end frame, here we are moving the text -250px on the left on the x-axis, the duration will be 3 seconds, and the easing will be set to linear so the animation can run at a constant speed.

here is the finished codesandbox.

I will be posting more GSAP tutorials soon, so please like and follow.