PatrickDevelopes Posted April 4, 2021 Share Posted April 4, 2021 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 More sharing options...
Solution Rodrigo Posted April 4, 2021 Solution Share Posted April 4, 2021 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!!! 3 1 Link to comment Share on other sites More sharing options...
PatrickDevelopes Posted April 4, 2021 Author Share Posted April 4, 2021 Thanks a ton! I'm glad I found Gsap, I'm looking into it just now. Nice to see an active community on here. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now