LucieB Posted April 29, 2020 Share Posted April 29, 2020 Hi everyone! Like most of you, I'm at home and I'm trying to create new things with GSAP! My goal is to recreate a draggable slider that I saw on Nikolas Type website, with React JS (hooks). I've never used the Draggable of GSAP. And even if I read the documentation, I don't know how it works with React : Can I just import gsap like this : import { gsap } from "gsap" ? Should I write the Draggable inside the useEffect part ? Here's a preview of what I'd like to achieve : Here's a Codesandbox I made. Actually there's no interactions/animations yet: https://codesandbox.io/s/draggable-slider-with-gsap-c5lem?file=/src/components/Slider.js Thanks a lot, and take care! Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 29, 2020 Share Posted April 29, 2020 Hey Lucie, We highly recommend our installation page for learning how to properly import and register GSAP and its plugins in a module environment. As for where to include the animation and Draggable stuff, there are different ways you can do it. We cover the basics of using a useEffect to do so in the modules install video but often times we've found it easier to use classes. You can learn more about that in our React article (it uses GSAP 2 syntax but the core concepts are the same): 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 29, 2020 Share Posted April 29, 2020 Hi, Basically this falls into the same category as this previous thread where it was discussed extensively all the different approaches and reasons to create a GSAP instance in a React app: As I said in that thread, it depends on whether or not the Slider state will be updated during it's lifecycle, nothing more. Finally this code seems to work fine in my samples: import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); const pictures = [];// pictures array const Slide = ({ imageSource, content }) => { return ( <div className="slide"> <div className="preview"> <img src={imageSource} alt="The Plant" draggable="false" /> </div> <div className="infos"> <h3>{content.date}</h3> <h2>{content.desc}</h2> </div> </div> ); }; export const Slider = () => { const sliderRef = useRef(null); useEffect(() => { console.log(sliderRef.current.clientWidth, sliderRef.current.innerWidth); Draggable.create(sliderRef.current, { type: "x", bounds: { minX: -sliderRef.current.clientWidth + window.innerWidth * 0.88, maxX: 0 } }); }, []); return ( <div id="slider" className="slider" ref={sliderRef}> {pictures.map((item, index) => { return ( <Slide key={index} imageSource={item.source} content={item.content} /> ); })} </div> ); }; Happy Tweening!!! 3 1 Link to comment Share on other sites More sharing options...
LucieB Posted April 29, 2020 Author Share Posted April 29, 2020 Thanks guys. What a answer, thanks a lot Rodrigo. I was just wondering about this : import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); But the code you wrote will probably help me a lot. Thanks again, and take care! 1 Link to comment Share on other sites More sharing options...
LucieB Posted April 30, 2020 Author Share Posted April 30, 2020 Hey. Just one last thing : to add some smooth/motion to a draggable slider, I saw we can use throwProps: true. Is it a GreenSock Premium plugin ? Or can we use it without the plugin ? I read some old topics in the forums, but actually I don't know if there's new changes about this, with the V3. Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 30, 2020 Share Posted April 30, 2020 4 hours ago, LucieB said: Is it a GreenSock Premium plugin ? Or can we use it without the plugin ? Yes, it's a Club GreenSock plugin. In GSAP 2 it was called ThrowPropsPlugin but in GSAP 3 it's called InertiaPlugin (because it's a more accurate name). The functionality is the same though. We’re pretty confident you’ll find that the membership pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here. 3 Link to comment Share on other sites More sharing options...
Rodrigo Posted April 30, 2020 Share Posted April 30, 2020 Hi, The inertia plugin can be used in Draggable and as Zach mentioned it is a club plugin. All you have to do is register as a club member, download the files and follow the instructions in the docs: https://greensock.com/docs/v3/Installation The syntax is pretty straight forward: useEffect(() => { console.log(sliderRef.current.clientWidth, sliderRef.current.innerWidth); Draggable.create(sliderRef.current, { type: "x", bounds: { minX: -sliderRef.current.clientWidth + window.innerWidth * 0.88, maxX: 0 }, inertia: true }); }, []); Just add the import statement and register the plugin: import React, { useEffect } from "react"; import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; import { InertiaPlugin } from "gsap/InertiaPlugin"; gsap.registerPlugin(Draggable, InertiaPlugin); Happy Tweening!!! 4 Link to comment Share on other sites More sharing options...
ashura Posted April 21, 2023 Share Posted April 21, 2023 Hi Rodrigo I forked his project however it seems inertia plugin is not working properly? It seems that something changed here or what? https://codesandbox.io/s/draggable-slider-with-gsap-forked-1tvogv?file=/src/components/Slider.js Link to comment Share on other sites More sharing options...
Rodrigo Posted April 21, 2023 Share Posted April 21, 2023 Hi, The Inertia Plugin is a benefit of Club GreenSock members. To test it on services such as Codesandbox and Stackblitz you have to install the GSAP Trial package: npm install --save gsap-trial I created an example using GSAP Trial, GSAP Context and the latest versions of both GSAP and React: https://stackblitz.com/edit/vitejs-vite-nffuxm?file=src%2Fcomponents%2FSlider.jsx&terminal=dev Remember to always use GSAP Context when working with React: https://greensock.com/docs/v3/GSAP/gsap.context() Hopefully this helps. Happy Tweening! 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