Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PatrickDevelopes

React.js/GraphQL Slider with Gsap Animations?

Go to solution Solved by Rodrigo,

Recommended Posts

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!

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.

 

Definitely you can use GSAP to animate your content slider. In fact two of our superstars have created amazing slider samples.

 

This one by @Chrysto

See the Pen kDvmC by bassta (@bassta) on CodePen

 

This one by @PointC

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

As an advice your starting point should be to create refs for each slide and use a useEffect hook in order to go to the target slide when the state is updated. Finally instead of using all sorts of calculations use xPercent in order to move the element to the desired direction, xPercent basically moves the target element based on it's size. In this case if a slide is 800px width and you usexPercent: -100 the slide will move 800px to the left, if you use fluid width it will use whatever width the element has, it's a great trick for responsive animations. Just make each slide to use all the available height and width of it's container and that such container has an overflow: hidden of course.

 

If you have any issues with your GSAP approach, feel free to create a reduced live sample in Codesandbox in order to take a better look at it.

 

Happy Tweening!!!

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×