Draggable slider with React

[LucieB]

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!

 

 

 

[ZachSaucier]

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):

 

[Rodrigo]

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!!!

[LucieB]

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!

[LucieB]

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

[ZachSaucier]

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. 

[Rodrigo]

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!!!

[ashura]

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

[Rodrigo]

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!