[React.js/GraphQL Slider with Gsap Animations?]

Thanks a ton! I'm glad I found Gsap, I'm looking into it just now.  Nice to see an active community on here. 

[React.js/GraphQL Slider with Gsap Animations?]

Hi there,

 

I'm new to Gsap and looking for a way to animate a slider that I've created using react. Now, my Slider.js component is sourcing data from contentful via Graphql so I've took a different approach to build the slider as you can see below.

 

Slider.js

import React from "react"
import { graphql, useStaticQuery } from "gatsby"

const query = graphql`
  {
    allContentfulExperience(filter: {node_locale: {eq: "en-US"}} ) {
      nodes {
        id
        slug
        title
        excerpt {
            excerpt
        }
        image {
          fluid {
            ...GatsbyContentfulFluid_withWebp          
          }
        }
      }
    }
  }
`



const Slider = () => {
    const data = useStaticQuery(query)
    const { allContentfulExperience: { nodes: products }, } = data
    const [index, setIndex] = React.useState(0);
    React.useEffect(() => {
        const lastIndex = products.length - 1;
        if (index < 0) {
            setIndex(lastIndex)
        }
        if (index > lastIndex) {
            setIndex(0)
        }

    }, [index, products])


    return <Wrapper>
        <div className="section-center">
            {products.map((product, productIndex) => {

                let position = "nextSlide"

                if (productIndex === index) {
                    position = "activeSlide"
                }
                if (productIndex === index - 1 || (index === 0 && productIndex === product.length - 1)) {
                    position = "lastSlide"
                }

                return (
                    <article className={position} key={productIndex}>
                        <Image fluid={product.image.fluid} alt={product.title} className="img"></Image>
                        <div className="info">
                            <h3>{product.title}</h3>
                            <p>{product.excerpt.excerpt}</p>
                            <StyledLinks message="View more »" linkes={product.slug} />
                        </div>
                    </article>
                )
            })}
            <FormPrevious
                className="prev"
                onClick={() => setIndex(index - 1)}
                color="white"
                size="large"
            />
            <FormNext
                className="next"
                onClick={() => setIndex(index + 1)}
                color="white"
                size="large"
            />
        </div>
    </Wrapper>
}

export default Slider

 

I was wondering now, if I can use Gsap to animate my slider.

 

For example, If I click the ''next button'' I want the content to animate in (I hope you get my idea.. ).

 

Is something like that possible with the Slider that I've built? What would be the Gsap plugins that I need? I know react pretty well but not really Gsap..

 

Thanks in advance!